@jbrowse/plugin-grid-bookmark 2.11.0 → 2.11.1

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.
Files changed (17) hide show
  1. package/dist/GridBookmarkWidget/components/Highlight/Highlight.js +8 -20
  2. package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +11 -14
  3. package/dist/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js +5 -3
  4. package/dist/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js +52 -29
  5. package/dist/GridBookmarkWidget/index.d.ts +1 -2
  6. package/dist/GridBookmarkWidget/index.js +3 -2
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js +2 -2
  9. package/esm/GridBookmarkWidget/components/Highlight/Highlight.js +9 -21
  10. package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.js +12 -15
  11. package/esm/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js +5 -3
  12. package/esm/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js +55 -32
  13. package/esm/GridBookmarkWidget/index.d.ts +1 -2
  14. package/esm/GridBookmarkWidget/index.js +2 -2
  15. package/esm/index.d.ts +1 -1
  16. package/esm/index.js +1 -1
  17. package/package.json +2 -2
package/dist/GridBookmarkWidget/components/Highlight/Highlight.js CHANGED
@@ -45,32 +45,22 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
45
45
  var _a;
46
46
  const { classes } = useStyles();
47
47
  const session = (0, util_1.getSession)(model);
48
- const { showBookmarkHighlights, showBookmarkLabels } = model;
49
48
  const { assemblyManager } = session;
50
- const assemblyNames = new Set(session.assemblyNames);
49
+ const { showBookmarkHighlights, showBookmarkLabels } = model;
51
50
  const bookmarkWidget = session.widgets.get('GridBookmark');
52
- const bookmarks = (0, react_1.useRef)((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
53
51
  (0, react_1.useEffect)(() => {
54
52
  if (!bookmarkWidget) {
55
- const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
56
- bookmarks.current = newBookmarkWidget.bookmarks;
53
+ session.addWidget('GridBookmarkWidget', 'GridBookmark');
57
54
  }
58
55
  }, [session, bookmarkWidget]);
59
- return showBookmarkHighlights && bookmarks.current
60
- ? bookmarks.current
61
- .filter(value => assemblyNames.has(value.assemblyName))
62
- .map(r => {
56
+ const set = new Set(model.assemblyNames);
57
+ return showBookmarkHighlights
58
+ ? (_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) === null || _a === void 0 ? void 0 : _a.filter(value => set.has(value.assemblyName)).map(r => {
63
59
  var _a;
64
60
  const asm = assemblyManager.get(r.assemblyName);
65
61
  const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
66
- const s = model.bpToPx({
67
- refName: refName,
68
- coord: r.start,
69
- });
70
- const e = model.bpToPx({
71
- refName: refName,
72
- coord: r.end,
73
- });
62
+ const s = model.bpToPx({ refName, coord: r.start });
63
+ const e = model.bpToPx({ refName, coord: r.end });
74
64
  return s && e
75
65
  ? {
76
66
  width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
@@ -79,9 +69,7 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
79
69
  label: r.label,
80
70
  }
81
71
  : undefined;
82
- })
83
- .filter(util_1.notEmpty)
84
- .map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
72
+ }).filter(util_1.notEmpty).map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
85
73
  left,
86
74
  width,
87
75
  background: highlight,
package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.js CHANGED
@@ -35,27 +35,26 @@ const useStyles = (0, mui_1.makeStyles)()({
35
35
  },
36
36
  });
37
37
  const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight({ model, overview, }) {
38
- var _a;
39
38
  const { cytobandOffset } = model;
40
39
  const session = (0, util_1.getSession)(model);
41
40
  const { classes } = useStyles();
41
+ const { assemblyManager } = session;
42
42
  const { showBookmarkHighlights, showBookmarkLabels } = model;
43
- const assemblyNames = new Set(session.assemblyNames);
44
43
  const bookmarkWidget = session.widgets.get('GridBookmark');
45
- const bookmarks = (0, react_1.useRef)((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
46
44
  (0, react_1.useEffect)(() => {
47
45
  if (!bookmarkWidget) {
48
- const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
49
- bookmarks.current = newBookmarkWidget.bookmarks;
46
+ session.addWidget('GridBookmarkWidget', 'GridBookmark');
50
47
  }
51
48
  }, [session, bookmarkWidget]);
52
- return showBookmarkHighlights && bookmarks.current
53
- ? bookmarks.current
54
- .filter(value => assemblyNames.has(value.assemblyName))
55
- .map(r => {
49
+ const assemblyNames = new Set(model.assemblyNames);
50
+ return showBookmarkHighlights
51
+ ? bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks.filter(r => assemblyNames.has(r.assemblyName)).map(r => {
52
+ var _a;
53
+ const asm = assemblyManager.get(r.assemblyName);
54
+ const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
56
55
  const rev = r.reversed;
57
- const s = overview.bpToPx({ ...r, coord: rev ? r.end : r.start });
58
- const e = overview.bpToPx({ ...r, coord: rev ? r.start : r.end });
56
+ const s = overview.bpToPx({ refName, coord: rev ? r.end : r.start });
57
+ const e = overview.bpToPx({ refName, coord: rev ? r.start : r.end });
59
58
  return s !== undefined && e !== undefined
60
59
  ? {
61
60
  width: Math.abs(e - s),
@@ -64,9 +63,7 @@ const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight(
64
63
  label: r.label,
65
64
  }
66
65
  : undefined;
67
- })
68
- .filter(util_1.notEmpty)
69
- .map((obj, idx) => {
66
+ }).filter(util_1.notEmpty).map((obj, idx) => {
70
67
  const { left, width, highlight, label } = obj;
71
68
  return (react_1.default.createElement(material_1.Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
72
69
  react_1.default.createElement("div", { className: classes.highlight, style: {
package/dist/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js CHANGED
@@ -36,7 +36,9 @@ const GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
36
36
  const utils_1 = require("../../utils");
37
37
  const useStyles = (0, mui_1.makeStyles)()({
38
38
  flexItem: {
39
- margin: 5,
39
+ display: 'flex',
40
+ alignItems: 'center',
41
+ gap: '5px',
40
42
  },
41
43
  container: {
42
44
  display: 'flex',
@@ -55,9 +57,9 @@ const ExportBookmarksDialog = (0, mobx_react_1.observer)(function ExportBookmark
55
57
  react_1.default.createElement("span", null, "All bookmarks will be exported."),
56
58
  react_1.default.createElement("br", null),
57
59
  react_1.default.createElement("span", null, "Use the checkboxes to select individual bookmarks to export."))) : ('Only selected bookmarks will be exported.')),
58
- react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
60
+ react_1.default.createElement("div", { className: classes.flexItem },
59
61
  react_1.default.createElement(material_1.Typography, null, "Format to download:"),
60
- react_1.default.createElement(material_1.Select, { size: "small", className: classes.flexItem, "data-testid": "selectFileType", value: fileType, onChange: event => setFileType(event.target.value) },
62
+ react_1.default.createElement(material_1.Select, { size: "small", value: fileType, onChange: event => setFileType(event.target.value) },
61
63
  react_1.default.createElement(material_1.MenuItem, { value: "BED" }, "BED"),
62
64
  react_1.default.createElement(material_1.MenuItem, { value: "TSV" }, "TSV")))),
63
65
  react_1.default.createElement(material_1.DialogActions, null,
package/dist/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js CHANGED
@@ -34,23 +34,21 @@ const ui_1 = require("@jbrowse/core/ui");
34
34
  const material_1 = require("@mui/material");
35
35
  const io_1 = require("@jbrowse/core/util/io");
36
36
  const ui_2 = require("@jbrowse/core/ui");
37
- const AssemblySelector_1 = __importDefault(require("@jbrowse/core/ui/AssemblySelector"));
38
37
  const mui_1 = require("tss-react/mui");
39
38
  // icons
40
39
  const Publish_1 = __importDefault(require("@mui/icons-material/Publish"));
41
40
  const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
42
- const Help_1 = __importDefault(require("@mui/icons-material/Help"));
43
41
  const utils_1 = require("../../utils");
44
42
  const sessionSharing_1 = require("../../sessionSharing");
45
43
  const useStyles = (0, mui_1.makeStyles)()(theme => {
46
44
  var _a;
47
45
  return ({
48
- flexItem: {
49
- margin: 5,
50
- },
51
46
  expandIcon: {
52
47
  color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
53
48
  },
49
+ minWidth: {
50
+ minWidth: 500,
51
+ },
54
52
  });
55
53
  });
56
54
  async function getBookmarksFromShareLink(shareLink, shareURL) {
@@ -62,18 +60,35 @@ async function getBookmarksFromShareLink(shareLink, shareURL) {
62
60
  const sharedSession = JSON.parse(await (0, utils_1.fromUrlSafeB64)(decryptedSession));
63
61
  return sharedSession.sharedBookmarks;
64
62
  }
65
- async function getBookmarksFromFile(location, selectedAsm) {
66
- const data = await (0, io_1.openLocation)(location).readFile('utf8');
67
- return data
68
- .split(/\n|\r\n|\r/)
69
- .filter(f => !!f.trim())
70
- .filter(f => !f.startsWith('#') &&
71
- !f.startsWith('track') &&
72
- !f.startsWith('browser'))
63
+ function guessFileType(header) {
64
+ return header.startsWith('chrom') && header.includes('assembly_name')
65
+ ? 'TSV'
66
+ : 'BED';
67
+ }
68
+ async function getBookmarksFromTSVFile(lines) {
69
+ if (lines[0].startsWith('chrom')) {
70
+ lines = lines.slice(1);
71
+ }
72
+ return lines
73
+ .filter(f => !f.startsWith('#'))
74
+ .map(line => {
75
+ const [refName, start, end, label, assemblyName] = line.split('\t');
76
+ return {
77
+ assemblyName: assemblyName,
78
+ refName,
79
+ start: +start,
80
+ end: +end,
81
+ label: label === '.' ? undefined : label,
82
+ };
83
+ });
84
+ }
85
+ async function getBookmarksFromBEDFile(lines, selectedAsm) {
86
+ return lines
87
+ .filter(f => !f.startsWith('#'))
73
88
  .map(line => {
74
- const [refName, start, end, label, assembly] = line.split('\t');
89
+ const [refName, start, end, label] = line.split('\t');
75
90
  return {
76
- assemblyName: assembly !== null && assembly !== void 0 ? assembly : selectedAsm,
91
+ assemblyName: selectedAsm,
77
92
  refName,
78
93
  start: +start,
79
94
  end: +end,
@@ -91,31 +106,39 @@ const ImportBookmarksDialog = (0, mobx_react_1.observer)(function ({ onClose, mo
91
106
  const [selectedAsm, setSelectedAsm] = (0, react_1.useState)(assemblyNames[0]);
92
107
  const [expanded, setExpanded] = (0, react_1.useState)('shareLinkAccordion');
93
108
  return (react_1.default.createElement(ui_2.Dialog, { open: true, onClose: onClose, maxWidth: "xl", title: "Import bookmarks" },
94
- react_1.default.createElement(material_1.DialogContent, null,
109
+ react_1.default.createElement(material_1.DialogContent, { className: classes.minWidth },
95
110
  react_1.default.createElement(material_1.Accordion, { expanded: expanded === 'shareLinkAccordion', onChange: () => setExpanded('shareLinkAccordion') },
96
111
  react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
97
- react_1.default.createElement(material_1.Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } },
98
- "Import from share link",
99
- ' ',
100
- react_1.default.createElement(material_1.Tooltip, { title: "The appropriate share link for sharing bookmarks is one generated via the 'Share' button in the 'Bookmarked regions' drawer. Paste it below to import shared bookmarks." },
101
- react_1.default.createElement(Help_1.default, null)))),
112
+ react_1.default.createElement(material_1.Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } }, "Import from share link")),
102
113
  react_1.default.createElement(material_1.AccordionDetails, null,
103
- react_1.default.createElement(material_1.TextField, { label: "Enter URL", variant: "outlined", style: { width: '100%' }, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
114
+ react_1.default.createElement(material_1.Typography, null, "Paste a bookmark share link generated by the 'Share' button from the bookmarks widget"),
115
+ react_1.default.createElement(material_1.TextField, { label: "Enter Share URL", variant: "outlined", fullWidth: true, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
104
116
  react_1.default.createElement(material_1.Accordion, { expanded: expanded === 'fileAccordion', onChange: () => setExpanded('fileAccordion') },
105
117
  react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
106
118
  react_1.default.createElement(material_1.Typography, null, "Import from file")),
107
119
  react_1.default.createElement(material_1.AccordionDetails, null,
108
- react_1.default.createElement(ui_1.FileSelector, { location: location, setLocation: setLocation, name: "File", description: "Choose a BED or TSV format file to import." }),
109
- react_1.default.createElement(AssemblySelector_1.default, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly your bookmarks belong to (BED or TSV without assembly column).`, session: session, selected: selectedAsm }))),
110
- error ? (react_1.default.createElement(material_1.Typography, { color: "error", variant: "h6" }, `${error}`)) : null),
120
+ react_1.default.createElement(ui_1.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".` }),
121
+ react_1.default.createElement(ui_2.AssemblySelector, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly for BED file.`, session: session, selected: selectedAsm }))),
122
+ error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null),
111
123
  react_1.default.createElement(material_1.DialogActions, null,
112
124
  react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: onClose }, "Cancel"),
113
- react_1.default.createElement(material_1.Button, { className: classes.flexItem, "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: react_1.default.createElement(Publish_1.default, null), onClick: async () => {
125
+ react_1.default.createElement(material_1.Button, { "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: react_1.default.createElement(Publish_1.default, null), onClick: async () => {
114
126
  try {
115
- if (location) {
116
- model.importBookmarks(await getBookmarksFromFile(location, selectedAsm));
127
+ if (expanded === 'fileAccordion' && location) {
128
+ const data = await (0, io_1.openLocation)(location).readFile('utf8');
129
+ const lines = data.split(/\n|\r\n|\r/).filter(f => !!f.trim());
130
+ const fileType = guessFileType(lines[0]);
131
+ if (fileType === 'BED') {
132
+ model.importBookmarks(await getBookmarksFromBEDFile(lines, selectedAsm));
133
+ }
134
+ else {
135
+ // TSV
136
+ model.importBookmarks(await getBookmarksFromTSVFile(lines));
137
+ }
117
138
  }
118
- else if (shareLink && (0, types_1.isSessionWithShareURL)(session)) {
139
+ else if (expanded === 'shareLinkAccordion' &&
140
+ shareLink &&
141
+ (0, types_1.isSessionWithShareURL)(session)) {
119
142
  model.importBookmarks(await getBookmarksFromShareLink(shareLink, session.shareURL));
120
143
  }
121
144
  onClose();
package/dist/GridBookmarkWidget/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import PluginManager from '@jbrowse/core/PluginManager';
2
- declare const _default: (pluginManager: PluginManager) => void;
3
- export default _default;
2
+ export default function GridBookmarkWidgetF(pluginManager: PluginManager): void;
package/dist/GridBookmarkWidget/index.js CHANGED
@@ -33,7 +33,7 @@ const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
33
33
  const model_1 = __importDefault(require("./model"));
34
34
  const Highlight_1 = __importDefault(require("./components/Highlight"));
35
35
  const configSchema = (0, configuration_1.ConfigurationSchema)('GridBookmarkWidget', {});
36
- exports.default = (pluginManager) => {
36
+ function GridBookmarkWidgetF(pluginManager) {
37
37
  pluginManager.addWidgetType(() => {
38
38
  return new pluggableElementTypes_1.WidgetType({
39
39
  name: 'GridBookmarkWidget',
@@ -44,4 +44,5 @@ exports.default = (pluginManager) => {
44
44
  });
45
45
  });
46
46
  (0, Highlight_1.default)(pluginManager);
47
- };
47
+ }
48
+ exports.default = GridBookmarkWidgetF;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import Plugin from '@jbrowse/core/Plugin';
2
2
  import PluginManager from '@jbrowse/core/PluginManager';
3
- export default class extends Plugin {
3
+ export default class GridBookmarkPlugin extends Plugin {
4
4
  name: string;
5
5
  install(pluginManager: PluginManager): void;
6
6
  configure(pluginManager: PluginManager): void;
package/dist/index.js CHANGED
@@ -11,7 +11,7 @@ const Bookmarks_1 = __importDefault(require("@mui/icons-material/Bookmarks"));
11
11
  const Highlight_1 = __importDefault(require("@mui/icons-material/Highlight"));
12
12
  const Label_1 = __importDefault(require("@mui/icons-material/Label"));
13
13
  const GridBookmarkWidget_1 = __importDefault(require("./GridBookmarkWidget"));
14
- class default_1 extends Plugin_1.default {
14
+ class GridBookmarkPlugin extends Plugin_1.default {
15
15
  constructor() {
16
16
  super(...arguments);
17
17
  this.name = 'GridBookmarkPlugin';
@@ -180,4 +180,4 @@ class default_1 extends Plugin_1.default {
180
180
  }
181
181
  }
182
182
  }
183
- exports.default = default_1;
183
+ exports.default = GridBookmarkPlugin;
package/esm/GridBookmarkWidget/components/Highlight/Highlight.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React, { useEffect } from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { makeStyles } from 'tss-react/mui';
4
4
  import { getSession, notEmpty } from '@jbrowse/core/util';
@@ -17,32 +17,22 @@ const Highlight = observer(function Highlight({ model }) {
17
17
  var _a;
18
18
  const { classes } = useStyles();
19
19
  const session = getSession(model);
20
- const { showBookmarkHighlights, showBookmarkLabels } = model;
21
20
  const { assemblyManager } = session;
22
- const assemblyNames = new Set(session.assemblyNames);
21
+ const { showBookmarkHighlights, showBookmarkLabels } = model;
23
22
  const bookmarkWidget = session.widgets.get('GridBookmark');
24
- const bookmarks = useRef((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
25
23
  useEffect(() => {
26
24
  if (!bookmarkWidget) {
27
- const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
28
- bookmarks.current = newBookmarkWidget.bookmarks;
25
+ session.addWidget('GridBookmarkWidget', 'GridBookmark');
29
26
  }
30
27
  }, [session, bookmarkWidget]);
31
- return showBookmarkHighlights && bookmarks.current
32
- ? bookmarks.current
33
- .filter(value => assemblyNames.has(value.assemblyName))
34
- .map(r => {
28
+ const set = new Set(model.assemblyNames);
29
+ return showBookmarkHighlights
30
+ ? (_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) === null || _a === void 0 ? void 0 : _a.filter(value => set.has(value.assemblyName)).map(r => {
35
31
  var _a;
36
32
  const asm = assemblyManager.get(r.assemblyName);
37
33
  const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
38
- const s = model.bpToPx({
39
- refName: refName,
40
- coord: r.start,
41
- });
42
- const e = model.bpToPx({
43
- refName: refName,
44
- coord: r.end,
45
- });
34
+ const s = model.bpToPx({ refName, coord: r.start });
35
+ const e = model.bpToPx({ refName, coord: r.end });
46
36
  return s && e
47
37
  ? {
48
38
  width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
@@ -51,9 +41,7 @@ const Highlight = observer(function Highlight({ model }) {
51
41
  label: r.label,
52
42
  }
53
43
  : undefined;
54
- })
55
- .filter(notEmpty)
56
- .map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
44
+ }).filter(notEmpty).map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
57
45
  left,
58
46
  width,
59
47
  background: highlight,
package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React, { useEffect } from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { makeStyles } from 'tss-react/mui';
4
4
  import { getSession, notEmpty } from '@jbrowse/core/util';
@@ -10,27 +10,26 @@ const useStyles = makeStyles()({
10
10
  },
11
11
  });
12
12
  const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
13
- var _a;
14
13
  const { cytobandOffset } = model;
15
14
  const session = getSession(model);
16
15
  const { classes } = useStyles();
16
+ const { assemblyManager } = session;
17
17
  const { showBookmarkHighlights, showBookmarkLabels } = model;
18
- const assemblyNames = new Set(session.assemblyNames);
19
18
  const bookmarkWidget = session.widgets.get('GridBookmark');
20
- const bookmarks = useRef((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
21
19
  useEffect(() => {
22
20
  if (!bookmarkWidget) {
23
- const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
24
- bookmarks.current = newBookmarkWidget.bookmarks;
21
+ session.addWidget('GridBookmarkWidget', 'GridBookmark');
25
22
  }
26
23
  }, [session, bookmarkWidget]);
27
- return showBookmarkHighlights && bookmarks.current
28
- ? bookmarks.current
29
- .filter(value => assemblyNames.has(value.assemblyName))
30
- .map(r => {
24
+ const assemblyNames = new Set(model.assemblyNames);
25
+ return showBookmarkHighlights
26
+ ? bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks.filter(r => assemblyNames.has(r.assemblyName)).map(r => {
27
+ var _a;
28
+ const asm = assemblyManager.get(r.assemblyName);
29
+ const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
31
30
  const rev = r.reversed;
32
- const s = overview.bpToPx({ ...r, coord: rev ? r.end : r.start });
33
- const e = overview.bpToPx({ ...r, coord: rev ? r.start : r.end });
31
+ const s = overview.bpToPx({ refName, coord: rev ? r.end : r.start });
32
+ const e = overview.bpToPx({ refName, coord: rev ? r.start : r.end });
34
33
  return s !== undefined && e !== undefined
35
34
  ? {
36
35
  width: Math.abs(e - s),
@@ -39,9 +38,7 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
39
38
  label: r.label,
40
39
  }
41
40
  : undefined;
42
- })
43
- .filter(notEmpty)
44
- .map((obj, idx) => {
41
+ }).filter(notEmpty).map((obj, idx) => {
45
42
  const { left, width, highlight, label } = obj;
46
43
  return (React.createElement(Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
47
44
  React.createElement("div", { className: classes.highlight, style: {
package/esm/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js CHANGED
@@ -8,7 +8,9 @@ import GetAppIcon from '@mui/icons-material/GetApp';
8
8
  import { downloadBookmarkFile } from '../../utils';
9
9
  const useStyles = makeStyles()({
10
10
  flexItem: {
11
- margin: 5,
11
+ display: 'flex',
12
+ alignItems: 'center',
13
+ gap: '5px',
12
14
  },
13
15
  container: {
14
16
  display: 'flex',
@@ -27,9 +29,9 @@ const ExportBookmarksDialog = observer(function ExportBookmarksDialog({ model, o
27
29
  React.createElement("span", null, "All bookmarks will be exported."),
28
30
  React.createElement("br", null),
29
31
  React.createElement("span", null, "Use the checkboxes to select individual bookmarks to export."))) : ('Only selected bookmarks will be exported.')),
30
- React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
32
+ React.createElement("div", { className: classes.flexItem },
31
33
  React.createElement(Typography, null, "Format to download:"),
32
- React.createElement(Select, { size: "small", className: classes.flexItem, "data-testid": "selectFileType", value: fileType, onChange: event => setFileType(event.target.value) },
34
+ React.createElement(Select, { size: "small", value: fileType, onChange: event => setFileType(event.target.value) },
33
35
  React.createElement(MenuItem, { value: "BED" }, "BED"),
34
36
  React.createElement(MenuItem, { value: "TSV" }, "TSV")))),
35
37
  React.createElement(DialogActions, null,
package/esm/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js CHANGED
@@ -2,27 +2,25 @@ import React, { useState } from 'react';
2
2
  import { observer } from 'mobx-react';
3
3
  import { getSession } from '@jbrowse/core/util';
4
4
  import { isSessionWithShareURL } from '@jbrowse/core/util/types';
5
- import { FileSelector } from '@jbrowse/core/ui';
6
- import { Button, DialogContent, DialogActions, Typography, TextField, Accordion, AccordionSummary, AccordionDetails, Tooltip, } from '@mui/material';
5
+ import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
6
+ import { Accordion, AccordionSummary, AccordionDetails, Button, DialogContent, DialogActions, TextField, Typography, } from '@mui/material';
7
7
  import { openLocation } from '@jbrowse/core/util/io';
8
- import { Dialog } from '@jbrowse/core/ui';
9
- import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
8
+ import { Dialog, AssemblySelector } from '@jbrowse/core/ui';
10
9
  import { makeStyles } from 'tss-react/mui';
11
10
  // icons
12
11
  import ImportIcon from '@mui/icons-material/Publish';
13
12
  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
14
- import HelpIcon from '@mui/icons-material/Help';
15
13
  import { fromUrlSafeB64 } from '../../utils';
16
14
  import { readSessionFromDynamo } from '../../sessionSharing';
17
15
  const useStyles = makeStyles()(theme => {
18
16
  var _a;
19
17
  return ({
20
- flexItem: {
21
- margin: 5,
22
- },
23
18
  expandIcon: {
24
19
  color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
25
20
  },
21
+ minWidth: {
22
+ minWidth: 500,
23
+ },
26
24
  });
27
25
  });
28
26
  async function getBookmarksFromShareLink(shareLink, shareURL) {
@@ -34,18 +32,35 @@ async function getBookmarksFromShareLink(shareLink, shareURL) {
34
32
  const sharedSession = JSON.parse(await fromUrlSafeB64(decryptedSession));
35
33
  return sharedSession.sharedBookmarks;
36
34
  }
37
- async function getBookmarksFromFile(location, selectedAsm) {
38
- const data = await openLocation(location).readFile('utf8');
39
- return data
40
- .split(/\n|\r\n|\r/)
41
- .filter(f => !!f.trim())
42
- .filter(f => !f.startsWith('#') &&
43
- !f.startsWith('track') &&
44
- !f.startsWith('browser'))
35
+ function guessFileType(header) {
36
+ return header.startsWith('chrom') && header.includes('assembly_name')
37
+ ? 'TSV'
38
+ : 'BED';
39
+ }
40
+ async function getBookmarksFromTSVFile(lines) {
41
+ if (lines[0].startsWith('chrom')) {
42
+ lines = lines.slice(1);
43
+ }
44
+ return lines
45
+ .filter(f => !f.startsWith('#'))
46
+ .map(line => {
47
+ const [refName, start, end, label, assemblyName] = line.split('\t');
48
+ return {
49
+ assemblyName: assemblyName,
50
+ refName,
51
+ start: +start,
52
+ end: +end,
53
+ label: label === '.' ? undefined : label,
54
+ };
55
+ });
56
+ }
57
+ async function getBookmarksFromBEDFile(lines, selectedAsm) {
58
+ return lines
59
+ .filter(f => !f.startsWith('#'))
45
60
  .map(line => {
46
- const [refName, start, end, label, assembly] = line.split('\t');
61
+ const [refName, start, end, label] = line.split('\t');
47
62
  return {
48
- assemblyName: assembly !== null && assembly !== void 0 ? assembly : selectedAsm,
63
+ assemblyName: selectedAsm,
49
64
  refName,
50
65
  start: +start,
51
66
  end: +end,
@@ -63,31 +78,39 @@ const ImportBookmarksDialog = observer(function ({ onClose, model, }) {
63
78
  const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0]);
64
79
  const [expanded, setExpanded] = useState('shareLinkAccordion');
65
80
  return (React.createElement(Dialog, { open: true, onClose: onClose, maxWidth: "xl", title: "Import bookmarks" },
66
- React.createElement(DialogContent, null,
81
+ React.createElement(DialogContent, { className: classes.minWidth },
67
82
  React.createElement(Accordion, { expanded: expanded === 'shareLinkAccordion', onChange: () => setExpanded('shareLinkAccordion') },
68
83
  React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
69
- React.createElement(Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } },
70
- "Import from share link",
71
- ' ',
72
- React.createElement(Tooltip, { title: "The appropriate share link for sharing bookmarks is one generated via the 'Share' button in the 'Bookmarked regions' drawer. Paste it below to import shared bookmarks." },
73
- React.createElement(HelpIcon, null)))),
84
+ React.createElement(Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } }, "Import from share link")),
74
85
  React.createElement(AccordionDetails, null,
75
- React.createElement(TextField, { label: "Enter URL", variant: "outlined", style: { width: '100%' }, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
86
+ React.createElement(Typography, null, "Paste a bookmark share link generated by the 'Share' button from the bookmarks widget"),
87
+ React.createElement(TextField, { label: "Enter Share URL", variant: "outlined", fullWidth: true, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
76
88
  React.createElement(Accordion, { expanded: expanded === 'fileAccordion', onChange: () => setExpanded('fileAccordion') },
77
89
  React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
78
90
  React.createElement(Typography, null, "Import from file")),
79
91
  React.createElement(AccordionDetails, null,
80
- React.createElement(FileSelector, { location: location, setLocation: setLocation, name: "File", description: "Choose a BED or TSV format file to import." }),
81
- React.createElement(AssemblySelector, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly your bookmarks belong to (BED or TSV without assembly column).`, session: session, selected: selectedAsm }))),
82
- error ? (React.createElement(Typography, { color: "error", variant: "h6" }, `${error}`)) : null),
92
+ React.createElement(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".` }),
93
+ React.createElement(AssemblySelector, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly for BED file.`, session: session, selected: selectedAsm }))),
94
+ error ? React.createElement(ErrorMessage, { error: error }) : null),
83
95
  React.createElement(DialogActions, null,
84
96
  React.createElement(Button, { variant: "contained", color: "secondary", onClick: onClose }, "Cancel"),
85
- React.createElement(Button, { className: classes.flexItem, "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: React.createElement(ImportIcon, null), onClick: async () => {
97
+ React.createElement(Button, { "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: React.createElement(ImportIcon, null), onClick: async () => {
86
98
  try {
87
- if (location) {
88
- model.importBookmarks(await getBookmarksFromFile(location, selectedAsm));
99
+ if (expanded === 'fileAccordion' && location) {
100
+ const data = await openLocation(location).readFile('utf8');
101
+ const lines = data.split(/\n|\r\n|\r/).filter(f => !!f.trim());
102
+ const fileType = guessFileType(lines[0]);
103
+ if (fileType === 'BED') {
104
+ model.importBookmarks(await getBookmarksFromBEDFile(lines, selectedAsm));
105
+ }
106
+ else {
107
+ // TSV
108
+ model.importBookmarks(await getBookmarksFromTSVFile(lines));
109
+ }
89
110
  }
90
- else if (shareLink && isSessionWithShareURL(session)) {
111
+ else if (expanded === 'shareLinkAccordion' &&
112
+ shareLink &&
113
+ isSessionWithShareURL(session)) {
91
114
  model.importBookmarks(await getBookmarksFromShareLink(shareLink, session.shareURL));
92
115
  }
93
116
  onClose();
package/esm/GridBookmarkWidget/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import PluginManager from '@jbrowse/core/PluginManager';
2
- declare const _default: (pluginManager: PluginManager) => void;
3
- export default _default;
2
+ export default function GridBookmarkWidgetF(pluginManager: PluginManager): void;
package/esm/GridBookmarkWidget/index.js CHANGED
@@ -5,7 +5,7 @@ import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
5
5
  import stateModelFactory from './model';
6
6
  import AddHighlightModelF from './components/Highlight';
7
7
  const configSchema = ConfigurationSchema('GridBookmarkWidget', {});
8
- export default (pluginManager) => {
8
+ export default function GridBookmarkWidgetF(pluginManager) {
9
9
  pluginManager.addWidgetType(() => {
10
10
  return new WidgetType({
11
11
  name: 'GridBookmarkWidget',
@@ -16,4 +16,4 @@ export default (pluginManager) => {
16
16
  });
17
17
  });
18
18
  AddHighlightModelF(pluginManager);
19
- };
19
+ }
package/esm/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import Plugin from '@jbrowse/core/Plugin';
2
2
  import PluginManager from '@jbrowse/core/PluginManager';
3
- export default class extends Plugin {
3
+ export default class GridBookmarkPlugin extends Plugin {
4
4
  name: string;
5
5
  install(pluginManager: PluginManager): void;
6
6
  configure(pluginManager: PluginManager): void;
package/esm/index.js CHANGED
@@ -6,7 +6,7 @@ import BookmarksIcon from '@mui/icons-material/Bookmarks';
6
6
  import HighlightIcon from '@mui/icons-material/Highlight';
7
7
  import LabelIcon from '@mui/icons-material/Label';
8
8
  import GridBookmarkWidgetF from './GridBookmarkWidget';
9
- export default class extends Plugin {
9
+ export default class GridBookmarkPlugin extends Plugin {
10
10
  constructor() {
11
11
  super(...arguments);
12
12
  this.name = 'GridBookmarkPlugin';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-grid-bookmark",
3
- "version": "2.11.0",
3
+ "version": "2.11.1",
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": "3d43a820b9274a6160aa4dc15616147f390d9094"
62
+ "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
63
63
  }