@jbrowse/plugin-data-management 3.6.5 → 3.7.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/AssemblyManager/AssemblyAddForm.js +5 -21
- package/dist/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js +81 -45
- package/dist/HierarchicalTrackSelectorWidget/model.js +1 -1
- package/esm/AssemblyManager/AssemblyAddForm.js +5 -21
- package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js +82 -46
- package/esm/HierarchicalTrackSelectorWidget/model.js +1 -1
- package/package.json +5 -5
|
@@ -11,32 +11,16 @@ const AdapterSelector = (0, mobx_react_1.observer)(function ({ adapterSelection,
|
|
|
11
11
|
}, children: adapterTypes.map(str => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: str, children: str }, str))) }));
|
|
12
12
|
});
|
|
13
13
|
const UnindexedFastaAdapterInput = (0, mobx_react_1.observer)(function ({ fastaLocation, setFastaLocation, }) {
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "warning", style: { margin:
|
|
15
|
-
setFastaLocation(loc);
|
|
16
|
-
} }) })] }));
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "warning", style: { margin: 8 }, children: "Note: a FASTA index will be generated on submit, might take a couple minutes and if the file is remote, it will be downloaded in full" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "FASTA file", location: fastaLocation, setLocation: setFastaLocation }) })] }));
|
|
17
15
|
});
|
|
18
16
|
const IndexedFastaAdapterInput = (0, mobx_react_1.observer)(function ({ fastaLocation, faiLocation, setFaiLocation, setFastaLocation, }) {
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "
|
|
20
|
-
setFastaLocation(loc);
|
|
21
|
-
} }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "faiLocation", location: faiLocation, setLocation: loc => {
|
|
22
|
-
setFaiLocation(loc);
|
|
23
|
-
} }) })] }));
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "FASTA file", location: fastaLocation, setLocation: setFastaLocation }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "FASTA index (.fai) file", location: faiLocation, setLocation: setFaiLocation }) })] }));
|
|
24
18
|
});
|
|
25
19
|
const BgzipFastaAdapterInput = (0, mobx_react_1.observer)(function ({ fastaLocation, faiLocation, gziLocation, setFaiLocation, setGziLocation, setFastaLocation, }) {
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "
|
|
27
|
-
setFastaLocation(loc);
|
|
28
|
-
} }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "faiLocation", location: faiLocation, setLocation: loc => {
|
|
29
|
-
setFaiLocation(loc);
|
|
30
|
-
} }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "gziLocation", location: gziLocation, setLocation: loc => {
|
|
31
|
-
setGziLocation(loc);
|
|
32
|
-
} }) })] }));
|
|
20
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "FASTA file (.fa.gz)", location: fastaLocation, setLocation: setFastaLocation }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "FASTA index (.fai) file", location: faiLocation, setLocation: setFaiLocation }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "FASTA gzip index (.gzi) file", location: gziLocation, setLocation: setGziLocation }) })] }));
|
|
33
21
|
});
|
|
34
22
|
const TwoBitAdapterInput = (0, mobx_react_1.observer)(function ({ twoBitLocation, chromSizesLocation, setTwoBitLocation, setChromSizesLocation, }) {
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "
|
|
36
|
-
setTwoBitLocation(loc);
|
|
37
|
-
} }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "chromSizesLocation (optional, can be added to speed up loading 2bit files with many contigs)", location: chromSizesLocation, setLocation: loc => {
|
|
38
|
-
setChromSizesLocation(loc);
|
|
39
|
-
} }) })] }));
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "2bit file", location: twoBitLocation, setLocation: setTwoBitLocation }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: ".chrom.sizes (optional, can speed up loading 2bit files with many contigs)", location: chromSizesLocation, setLocation: setChromSizesLocation }) })] }));
|
|
40
24
|
});
|
|
41
25
|
const blank = { uri: '' };
|
|
42
26
|
const adapterTypes = [
|
|
@@ -58,7 +42,7 @@ const AssemblyAddForm = (0, mobx_react_1.observer)(function ({ session, onClose,
|
|
|
58
42
|
setAssemblyName(event.target.value);
|
|
59
43
|
}, slotProps: {
|
|
60
44
|
htmlInput: { 'data-testid': 'assembly-name' },
|
|
61
|
-
} }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "assembly-name", label: "Assembly display name", helperText: '(optional) A human readable display name for the assembly e.g. "Homo sapiens (hg38)"', variant: "outlined", value: assemblyDisplayName, onChange: event => {
|
|
45
|
+
} }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "assembly-display-name", label: "Assembly display name", helperText: '(optional) A human readable display name for the assembly e.g. "Homo sapiens (hg38)"', variant: "outlined", value: assemblyDisplayName, onChange: event => {
|
|
62
46
|
setAssemblyDisplayName(event.target.value);
|
|
63
47
|
}, slotProps: {
|
|
64
48
|
htmlInput: {
|
|
@@ -6,13 +6,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.default = Category;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const react_1 = require("react");
|
|
9
|
-
const
|
|
9
|
+
const ui_1 = require("@jbrowse/core/ui");
|
|
10
10
|
const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
|
|
11
11
|
const ArrowRight_1 = __importDefault(require("@mui/icons-material/ArrowRight"));
|
|
12
12
|
const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
|
|
13
13
|
const material_1 = require("@mui/material");
|
|
14
14
|
const mui_1 = require("tss-react/mui");
|
|
15
15
|
const util_1 = require("../util");
|
|
16
|
+
function getAllSubcategories(node) {
|
|
17
|
+
const categoryIds = [];
|
|
18
|
+
if (node.type === 'category') {
|
|
19
|
+
for (const child of node.children) {
|
|
20
|
+
if (child.type === 'category') {
|
|
21
|
+
categoryIds.push(child.id, ...getAllSubcategories(child));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return categoryIds;
|
|
26
|
+
}
|
|
16
27
|
const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
17
28
|
contrastColor: {
|
|
18
29
|
color: theme.palette.tertiary.contrastText,
|
|
@@ -24,58 +35,83 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
24
35
|
}));
|
|
25
36
|
function Category({ isOpen, setOpen, data, }) {
|
|
26
37
|
const { classes } = useStyles();
|
|
27
|
-
const [
|
|
38
|
+
const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
|
|
28
39
|
const { menuItems = [], name, model, id, tree } = data;
|
|
29
|
-
|
|
30
|
-
|
|
40
|
+
const currentNode = (0, util_1.treeToMap)(tree).get(id);
|
|
41
|
+
const subcategoryIds = currentNode ? getAllSubcategories(currentNode) : [];
|
|
42
|
+
const hasSubcategories = subcategoryIds.length > 0;
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: classes.accordionText, onClick: () => {
|
|
44
|
+
if (!menuOpen) {
|
|
31
45
|
data.toggleCollapse(id);
|
|
32
46
|
setOpen(!isOpen);
|
|
33
47
|
}
|
|
34
|
-
}, children:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
model.addToSelection((0, util_1.getAllChildren)(r));
|
|
48
|
+
}, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { "data-testid": `htsCategory-${name}`, children: [isOpen ? (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) : (0, jsx_runtime_1.jsx)(ArrowRight_1.default, {}), name, (0, jsx_runtime_1.jsx)(ui_1.CascadingMenuButton, { menuItems: [
|
|
49
|
+
{
|
|
50
|
+
label: 'Add to selection',
|
|
51
|
+
onClick: () => {
|
|
52
|
+
const r = (0, util_1.treeToMap)(tree).get(id);
|
|
53
|
+
model.addToSelection((0, util_1.getAllChildren)(r));
|
|
54
|
+
},
|
|
55
|
+
helpText: 'Add all tracks in this category to the current selection. This allows you to perform bulk operations on multiple tracks at once, such as configuring settings or exporting track configurations.',
|
|
43
56
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
57
|
+
{
|
|
58
|
+
label: 'Remove from selection',
|
|
59
|
+
onClick: () => {
|
|
60
|
+
const r = (0, util_1.treeToMap)(tree).get(id);
|
|
61
|
+
model.removeFromSelection((0, util_1.getAllChildren)(r));
|
|
62
|
+
},
|
|
63
|
+
helpText: 'Remove all tracks in this category from the current selection. Use this to deselect tracks that were previously added to your selection.',
|
|
50
64
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
65
|
+
{
|
|
66
|
+
label: 'Show all',
|
|
67
|
+
onClick: () => {
|
|
68
|
+
var _a;
|
|
69
|
+
for (const entry of ((_a = (0, util_1.treeToMap)(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
|
|
70
|
+
if (entry.type === 'track') {
|
|
71
|
+
model.view.showTrack(entry.trackId);
|
|
72
|
+
}
|
|
59
73
|
}
|
|
60
|
-
}
|
|
74
|
+
},
|
|
75
|
+
helpText: 'Display all tracks in this category on the current view. This is useful when you want to visualize multiple related tracks simultaneously to compare their data.',
|
|
61
76
|
},
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
77
|
+
{
|
|
78
|
+
label: 'Hide all',
|
|
79
|
+
onClick: () => {
|
|
80
|
+
var _a;
|
|
81
|
+
for (const entry of ((_a = (0, util_1.treeToMap)(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
|
|
82
|
+
if (entry.type === 'track') {
|
|
83
|
+
model.view.hideTrack(entry.trackId);
|
|
84
|
+
}
|
|
70
85
|
}
|
|
71
|
-
}
|
|
86
|
+
},
|
|
87
|
+
helpText: 'Hide all tracks in this category from the current view. This helps declutter your view by removing tracks you are not currently analyzing.',
|
|
72
88
|
},
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
89
|
+
...(hasSubcategories
|
|
90
|
+
? [
|
|
91
|
+
{
|
|
92
|
+
label: 'Collapse all subcategories',
|
|
93
|
+
onClick: () => {
|
|
94
|
+
for (const subcategoryId of subcategoryIds) {
|
|
95
|
+
if (!model.collapsed.get(subcategoryId)) {
|
|
96
|
+
model.toggleCategory(subcategoryId);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
helpText: 'Collapse all nested subcategories within this category. This provides a cleaner, more compact view of the track hierarchy by hiding the detailed contents of subcategories.',
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
label: 'Expand all subcategories',
|
|
104
|
+
onClick: () => {
|
|
105
|
+
for (const subcategoryId of subcategoryIds) {
|
|
106
|
+
if (model.collapsed.get(subcategoryId)) {
|
|
107
|
+
model.toggleCategory(subcategoryId);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
helpText: 'Expand all nested subcategories within this category. This reveals all tracks and subcategories at once, making it easier to browse and select tracks from the entire hierarchy.',
|
|
112
|
+
},
|
|
113
|
+
]
|
|
114
|
+
: []),
|
|
115
|
+
...menuItems,
|
|
116
|
+
], className: classes.contrastColor, stopPropagation: true, setOpen: setMenuOpen, children: (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}) })] }) }));
|
|
81
117
|
}
|
|
@@ -243,7 +243,7 @@ function stateTreeFactory(pluginManager) {
|
|
|
243
243
|
},
|
|
244
244
|
...connectionInstances.flatMap(c => ({
|
|
245
245
|
group: (0, configuration_1.getConf)(c, 'name'),
|
|
246
|
-
tracks: c.tracks,
|
|
246
|
+
tracks: (0, filterTracks_1.filterTracks)(c.tracks, self),
|
|
247
247
|
noCategories: false,
|
|
248
248
|
menuItems: [],
|
|
249
249
|
})),
|
|
@@ -9,32 +9,16 @@ const AdapterSelector = observer(function ({ adapterSelection, setAdapterSelecti
|
|
|
9
9
|
}, children: adapterTypes.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }));
|
|
10
10
|
});
|
|
11
11
|
const UnindexedFastaAdapterInput = observer(function ({ fastaLocation, setFastaLocation, }) {
|
|
12
|
-
return (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "warning", style: { margin:
|
|
13
|
-
setFastaLocation(loc);
|
|
14
|
-
} }) })] }));
|
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "warning", style: { margin: 8 }, children: "Note: a FASTA index will be generated on submit, might take a couple minutes and if the file is remote, it will be downloaded in full" }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA file", location: fastaLocation, setLocation: setFastaLocation }) })] }));
|
|
15
13
|
});
|
|
16
14
|
const IndexedFastaAdapterInput = observer(function ({ fastaLocation, faiLocation, setFaiLocation, setFastaLocation, }) {
|
|
17
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "
|
|
18
|
-
setFastaLocation(loc);
|
|
19
|
-
} }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "faiLocation", location: faiLocation, setLocation: loc => {
|
|
20
|
-
setFaiLocation(loc);
|
|
21
|
-
} }) })] }));
|
|
15
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA file", location: fastaLocation, setLocation: setFastaLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: faiLocation, setLocation: setFaiLocation }) })] }));
|
|
22
16
|
});
|
|
23
17
|
const BgzipFastaAdapterInput = observer(function ({ fastaLocation, faiLocation, gziLocation, setFaiLocation, setGziLocation, setFastaLocation, }) {
|
|
24
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "
|
|
25
|
-
setFastaLocation(loc);
|
|
26
|
-
} }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "faiLocation", location: faiLocation, setLocation: loc => {
|
|
27
|
-
setFaiLocation(loc);
|
|
28
|
-
} }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "gziLocation", location: gziLocation, setLocation: loc => {
|
|
29
|
-
setGziLocation(loc);
|
|
30
|
-
} }) })] }));
|
|
18
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA file (.fa.gz)", location: fastaLocation, setLocation: setFastaLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: faiLocation, setLocation: setFaiLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "FASTA gzip index (.gzi) file", location: gziLocation, setLocation: setGziLocation }) })] }));
|
|
31
19
|
});
|
|
32
20
|
const TwoBitAdapterInput = observer(function ({ twoBitLocation, chromSizesLocation, setTwoBitLocation, setChromSizesLocation, }) {
|
|
33
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "
|
|
34
|
-
setTwoBitLocation(loc);
|
|
35
|
-
} }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: "chromSizesLocation (optional, can be added to speed up loading 2bit files with many contigs)", location: chromSizesLocation, setLocation: loc => {
|
|
36
|
-
setChromSizesLocation(loc);
|
|
37
|
-
} }) })] }));
|
|
21
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(FileSelector, { inline: true, name: "2bit file", location: twoBitLocation, setLocation: setTwoBitLocation }) }), _jsx("div", { children: _jsx(FileSelector, { inline: true, name: ".chrom.sizes (optional, can speed up loading 2bit files with many contigs)", location: chromSizesLocation, setLocation: setChromSizesLocation }) })] }));
|
|
38
22
|
});
|
|
39
23
|
const blank = { uri: '' };
|
|
40
24
|
const adapterTypes = [
|
|
@@ -56,7 +40,7 @@ const AssemblyAddForm = observer(function ({ session, onClose, }) {
|
|
|
56
40
|
setAssemblyName(event.target.value);
|
|
57
41
|
}, slotProps: {
|
|
58
42
|
htmlInput: { 'data-testid': 'assembly-name' },
|
|
59
|
-
} }), _jsx(TextField, { id: "assembly-name", label: "Assembly display name", helperText: '(optional) A human readable display name for the assembly e.g. "Homo sapiens (hg38)"', variant: "outlined", value: assemblyDisplayName, onChange: event => {
|
|
43
|
+
} }), _jsx(TextField, { id: "assembly-display-name", label: "Assembly display name", helperText: '(optional) A human readable display name for the assembly e.g. "Homo sapiens (hg38)"', variant: "outlined", value: assemblyDisplayName, onChange: event => {
|
|
60
44
|
setAssemblyDisplayName(event.target.value);
|
|
61
45
|
}, slotProps: {
|
|
62
46
|
htmlInput: {
|
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import { CascadingMenuButton } from '@jbrowse/core/ui';
|
|
4
4
|
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
|
5
5
|
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
|
|
6
6
|
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
|
|
7
|
-
import {
|
|
7
|
+
import { Typography } from '@mui/material';
|
|
8
8
|
import { makeStyles } from 'tss-react/mui';
|
|
9
9
|
import { getAllChildren, treeToMap } from '../util';
|
|
10
|
+
function getAllSubcategories(node) {
|
|
11
|
+
const categoryIds = [];
|
|
12
|
+
if (node.type === 'category') {
|
|
13
|
+
for (const child of node.children) {
|
|
14
|
+
if (child.type === 'category') {
|
|
15
|
+
categoryIds.push(child.id, ...getAllSubcategories(child));
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return categoryIds;
|
|
20
|
+
}
|
|
10
21
|
const useStyles = makeStyles()(theme => ({
|
|
11
22
|
contrastColor: {
|
|
12
23
|
color: theme.palette.tertiary.contrastText,
|
|
@@ -18,58 +29,83 @@ const useStyles = makeStyles()(theme => ({
|
|
|
18
29
|
}));
|
|
19
30
|
export default function Category({ isOpen, setOpen, data, }) {
|
|
20
31
|
const { classes } = useStyles();
|
|
21
|
-
const [
|
|
32
|
+
const [menuOpen, setMenuOpen] = useState(false);
|
|
22
33
|
const { menuItems = [], name, model, id, tree } = data;
|
|
23
|
-
|
|
24
|
-
|
|
34
|
+
const currentNode = treeToMap(tree).get(id);
|
|
35
|
+
const subcategoryIds = currentNode ? getAllSubcategories(currentNode) : [];
|
|
36
|
+
const hasSubcategories = subcategoryIds.length > 0;
|
|
37
|
+
return (_jsx("div", { className: classes.accordionText, onClick: () => {
|
|
38
|
+
if (!menuOpen) {
|
|
25
39
|
data.toggleCollapse(id);
|
|
26
40
|
setOpen(!isOpen);
|
|
27
41
|
}
|
|
28
|
-
}, children:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
model.addToSelection(getAllChildren(r));
|
|
42
|
+
}, children: _jsxs(Typography, { "data-testid": `htsCategory-${name}`, children: [isOpen ? _jsx(ArrowDropDownIcon, {}) : _jsx(ArrowRightIcon, {}), name, _jsx(CascadingMenuButton, { menuItems: [
|
|
43
|
+
{
|
|
44
|
+
label: 'Add to selection',
|
|
45
|
+
onClick: () => {
|
|
46
|
+
const r = treeToMap(tree).get(id);
|
|
47
|
+
model.addToSelection(getAllChildren(r));
|
|
48
|
+
},
|
|
49
|
+
helpText: 'Add all tracks in this category to the current selection. This allows you to perform bulk operations on multiple tracks at once, such as configuring settings or exporting track configurations.',
|
|
37
50
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
51
|
+
{
|
|
52
|
+
label: 'Remove from selection',
|
|
53
|
+
onClick: () => {
|
|
54
|
+
const r = treeToMap(tree).get(id);
|
|
55
|
+
model.removeFromSelection(getAllChildren(r));
|
|
56
|
+
},
|
|
57
|
+
helpText: 'Remove all tracks in this category from the current selection. Use this to deselect tracks that were previously added to your selection.',
|
|
44
58
|
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
59
|
+
{
|
|
60
|
+
label: 'Show all',
|
|
61
|
+
onClick: () => {
|
|
62
|
+
var _a;
|
|
63
|
+
for (const entry of ((_a = treeToMap(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
|
|
64
|
+
if (entry.type === 'track') {
|
|
65
|
+
model.view.showTrack(entry.trackId);
|
|
66
|
+
}
|
|
53
67
|
}
|
|
54
|
-
}
|
|
68
|
+
},
|
|
69
|
+
helpText: 'Display all tracks in this category on the current view. This is useful when you want to visualize multiple related tracks simultaneously to compare their data.',
|
|
55
70
|
},
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
71
|
+
{
|
|
72
|
+
label: 'Hide all',
|
|
73
|
+
onClick: () => {
|
|
74
|
+
var _a;
|
|
75
|
+
for (const entry of ((_a = treeToMap(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
|
|
76
|
+
if (entry.type === 'track') {
|
|
77
|
+
model.view.hideTrack(entry.trackId);
|
|
78
|
+
}
|
|
64
79
|
}
|
|
65
|
-
}
|
|
80
|
+
},
|
|
81
|
+
helpText: 'Hide all tracks in this category from the current view. This helps declutter your view by removing tracks you are not currently analyzing.',
|
|
66
82
|
},
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
83
|
+
...(hasSubcategories
|
|
84
|
+
? [
|
|
85
|
+
{
|
|
86
|
+
label: 'Collapse all subcategories',
|
|
87
|
+
onClick: () => {
|
|
88
|
+
for (const subcategoryId of subcategoryIds) {
|
|
89
|
+
if (!model.collapsed.get(subcategoryId)) {
|
|
90
|
+
model.toggleCategory(subcategoryId);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
helpText: 'Collapse all nested subcategories within this category. This provides a cleaner, more compact view of the track hierarchy by hiding the detailed contents of subcategories.',
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
label: 'Expand all subcategories',
|
|
98
|
+
onClick: () => {
|
|
99
|
+
for (const subcategoryId of subcategoryIds) {
|
|
100
|
+
if (model.collapsed.get(subcategoryId)) {
|
|
101
|
+
model.toggleCategory(subcategoryId);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
helpText: 'Expand all nested subcategories within this category. This reveals all tracks and subcategories at once, making it easier to browse and select tracks from the entire hierarchy.',
|
|
106
|
+
},
|
|
107
|
+
]
|
|
108
|
+
: []),
|
|
109
|
+
...menuItems,
|
|
110
|
+
], className: classes.contrastColor, stopPropagation: true, setOpen: setMenuOpen, children: _jsx(MoreHorizIcon, {}) })] }) }));
|
|
75
111
|
}
|
|
@@ -240,7 +240,7 @@ export default function stateTreeFactory(pluginManager) {
|
|
|
240
240
|
},
|
|
241
241
|
...connectionInstances.flatMap(c => ({
|
|
242
242
|
group: getConf(c, 'name'),
|
|
243
|
-
tracks: c.tracks,
|
|
243
|
+
tracks: filterTracks(c.tracks, self),
|
|
244
244
|
noCategories: false,
|
|
245
245
|
menuItems: [],
|
|
246
246
|
})),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-data-management",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "JBrowse 2 linear genome view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@gmod/ucsc-hub": "^2.0.1",
|
|
40
|
-
"@jbrowse/core": "^3.
|
|
41
|
-
"@jbrowse/plugin-config": "^3.
|
|
42
|
-
"@jbrowse/product-core": "^3.
|
|
40
|
+
"@jbrowse/core": "^3.7.0",
|
|
41
|
+
"@jbrowse/plugin-config": "^3.7.0",
|
|
42
|
+
"@jbrowse/product-core": "^3.7.0",
|
|
43
43
|
"@mui/icons-material": "^7.0.0",
|
|
44
44
|
"@mui/material": "^7.0.0",
|
|
45
45
|
"@mui/x-data-grid": "^8.0.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"distModule": "esm/index.js",
|
|
62
62
|
"srcModule": "src/index.ts",
|
|
63
63
|
"module": "esm/index.js",
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
|
|
65
65
|
}
|