@jbrowse/plugin-linear-genome-view 3.1.0 → 3.2.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/BaseLinearDisplay/models/BaseLinearDisplayModel.js +9 -9
- package/dist/LaunchLinearGenomeView/index.js +9 -5
- package/dist/LinearGenomeView/components/OverviewRubberband.js +2 -14
- package/dist/LinearGenomeView/components/OverviewRubberbandHoverTooltip.d.ts +10 -0
- package/dist/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js +36 -0
- package/dist/LinearGenomeView/components/Rubberband.js +3 -21
- package/dist/LinearGenomeView/components/RubberbandSpan.js +6 -20
- package/dist/LinearGenomeView/components/RubberbandTooltip.d.ts +5 -0
- package/dist/LinearGenomeView/components/RubberbandTooltip.js +28 -0
- package/dist/LinearGenomeView/components/TracksContainer.js +2 -2
- package/dist/LinearGenomeView/components/VerticalGuide.js +3 -21
- package/dist/LinearGenomeView/model.d.ts +27 -3
- package/dist/LinearGenomeView/model.js +59 -26
- package/dist/LinearGenomeView/types.d.ts +5 -0
- package/esm/BaseLinearDisplay/models/BaseLinearDisplayModel.js +9 -9
- package/esm/LaunchLinearGenomeView/index.js +9 -5
- package/esm/LinearGenomeView/components/OverviewRubberband.js +3 -15
- package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.d.ts +10 -0
- package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js +34 -0
- package/esm/LinearGenomeView/components/Rubberband.js +4 -22
- package/esm/LinearGenomeView/components/RubberbandSpan.js +4 -21
- package/esm/LinearGenomeView/components/RubberbandTooltip.d.ts +5 -0
- package/esm/LinearGenomeView/components/RubberbandTooltip.js +25 -0
- package/esm/LinearGenomeView/components/TracksContainer.js +2 -2
- package/esm/LinearGenomeView/components/VerticalGuide.js +4 -22
- package/esm/LinearGenomeView/model.d.ts +27 -3
- package/esm/LinearGenomeView/model.js +59 -26
- package/esm/LinearGenomeView/types.d.ts +5 -0
- package/package.json +3 -3
|
@@ -117,14 +117,14 @@ function stateModelFactory() {
|
|
|
117
117
|
return (_b = (_a = self.blockState.get(blockKey)) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.getByID(id);
|
|
118
118
|
},
|
|
119
119
|
searchFeatureByID(id) {
|
|
120
|
+
var _a;
|
|
120
121
|
let ret;
|
|
121
|
-
self.blockState.
|
|
122
|
-
var _a;
|
|
122
|
+
for (const block of self.blockState.values()) {
|
|
123
123
|
const val = (_a = block.layout) === null || _a === void 0 ? void 0 : _a.getByID(id);
|
|
124
124
|
if (val) {
|
|
125
125
|
ret = val;
|
|
126
126
|
}
|
|
127
|
-
}
|
|
127
|
+
}
|
|
128
128
|
return ret;
|
|
129
129
|
},
|
|
130
130
|
}))
|
|
@@ -177,9 +177,9 @@ function stateModelFactory() {
|
|
|
177
177
|
self.setError();
|
|
178
178
|
self.setCurrStatsBpPerPx(0);
|
|
179
179
|
self.clearFeatureDensityStats();
|
|
180
|
-
|
|
180
|
+
for (const val of self.blockState.values()) {
|
|
181
181
|
val.doReload();
|
|
182
|
-
}
|
|
182
|
+
}
|
|
183
183
|
superReload();
|
|
184
184
|
},
|
|
185
185
|
};
|
|
@@ -269,17 +269,17 @@ function stateModelFactory() {
|
|
|
269
269
|
if (!view.initialized) {
|
|
270
270
|
return;
|
|
271
271
|
}
|
|
272
|
-
self.blockDefinitions.contentBlocks
|
|
272
|
+
for (const block of self.blockDefinitions.contentBlocks) {
|
|
273
273
|
blocksPresent[block.key] = true;
|
|
274
274
|
if (!self.blockState.has(block.key)) {
|
|
275
275
|
self.addBlock(block.key, block);
|
|
276
276
|
}
|
|
277
|
-
}
|
|
278
|
-
self.blockState.
|
|
277
|
+
}
|
|
278
|
+
for (const key of self.blockState.keys()) {
|
|
279
279
|
if (!blocksPresent[key]) {
|
|
280
280
|
self.deleteBlock(key);
|
|
281
281
|
}
|
|
282
|
-
}
|
|
282
|
+
}
|
|
283
283
|
}));
|
|
284
284
|
},
|
|
285
285
|
}))
|
|
@@ -23,7 +23,7 @@ function LaunchLinearGenomeViewF(pluginManager) {
|
|
|
23
23
|
view.setHideHeader(!nav);
|
|
24
24
|
}
|
|
25
25
|
if (highlight !== undefined) {
|
|
26
|
-
|
|
26
|
+
for (const h of highlight) {
|
|
27
27
|
const p = (0, util_1.parseLocString)(h, refName => assemblyManager.isValidRefName(refName, assembly));
|
|
28
28
|
const { start, end } = p;
|
|
29
29
|
if (start !== undefined && end !== undefined) {
|
|
@@ -34,13 +34,17 @@ function LaunchLinearGenomeViewF(pluginManager) {
|
|
|
34
34
|
assemblyName: assembly,
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
|
-
}
|
|
37
|
+
}
|
|
38
38
|
}
|
|
39
|
-
await (0, searchUtils_1.handleSelectedRegion)({
|
|
39
|
+
await (0, searchUtils_1.handleSelectedRegion)({
|
|
40
|
+
input: loc,
|
|
41
|
+
model: view,
|
|
42
|
+
assembly: asm,
|
|
43
|
+
});
|
|
40
44
|
const idsNotFound = [];
|
|
41
|
-
|
|
45
|
+
for (const track of tracks) {
|
|
42
46
|
tryTrack(view, track, idsNotFound);
|
|
43
|
-
}
|
|
47
|
+
}
|
|
44
48
|
if (idsNotFound.length) {
|
|
45
49
|
throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
|
|
46
50
|
}
|
|
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const util_1 = require("@jbrowse/core/util");
|
|
9
|
-
const material_1 = require("@mui/material");
|
|
10
9
|
const mobx_react_1 = require("mobx-react");
|
|
11
10
|
const mui_1 = require("tss-react/mui");
|
|
11
|
+
const OverviewRubberbandHoverTooltip_1 = __importDefault(require("./OverviewRubberbandHoverTooltip"));
|
|
12
12
|
const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
|
|
13
13
|
const util_2 = require("./util");
|
|
14
14
|
const useStyles = (0, mui_1.makeStyles)()({
|
|
@@ -27,18 +27,6 @@ const useStyles = (0, mui_1.makeStyles)()({
|
|
|
27
27
|
position: 'relative',
|
|
28
28
|
},
|
|
29
29
|
});
|
|
30
|
-
const HoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
|
|
31
|
-
var _a;
|
|
32
|
-
const { classes } = useStyles();
|
|
33
|
-
const { cytobandOffset } = model;
|
|
34
|
-
const { assemblyManager } = (0, util_1.getSession)(model);
|
|
35
|
-
const px = overview.pxToBp(guideX - cytobandOffset);
|
|
36
|
-
const assembly = assemblyManager.get(px.assemblyName);
|
|
37
|
-
const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
|
|
38
|
-
px.coord < f.get('end') &&
|
|
39
|
-
px.refName === assembly.getCanonicalRefName(f.get('refName')));
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: guideX } }) }));
|
|
41
|
-
});
|
|
42
30
|
const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberband({ model, overview, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
|
|
43
31
|
const { cytobandOffset } = model;
|
|
44
32
|
const [startX, setStartX] = (0, react_1.useState)();
|
|
@@ -108,7 +96,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
|
|
|
108
96
|
setGuideX(undefined);
|
|
109
97
|
}
|
|
110
98
|
if (startX === undefined) {
|
|
111
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(
|
|
99
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(OverviewRubberbandHoverTooltip_1.default, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
|
|
112
100
|
}
|
|
113
101
|
let left = startX || 0;
|
|
114
102
|
let width = 0;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { LinearGenomeViewModel } from '..';
|
|
2
|
+
import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
|
|
3
|
+
type LGV = LinearGenomeViewModel;
|
|
4
|
+
declare const OverviewRubberbandHoverTooltip: ({ model, open, guideX, overview, }: {
|
|
5
|
+
model: LGV;
|
|
6
|
+
open: boolean;
|
|
7
|
+
guideX: number;
|
|
8
|
+
overview: Base1DViewModel;
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default OverviewRubberbandHoverTooltip;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const util_1 = require("@jbrowse/core/util");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const mobx_react_1 = require("mobx-react");
|
|
7
|
+
const mui_1 = require("tss-react/mui");
|
|
8
|
+
const useStyles = (0, mui_1.makeStyles)()({
|
|
9
|
+
rubberbandControl: {
|
|
10
|
+
cursor: 'crosshair',
|
|
11
|
+
width: '100%',
|
|
12
|
+
minHeight: 8,
|
|
13
|
+
},
|
|
14
|
+
guide: {
|
|
15
|
+
pointerEvents: 'none',
|
|
16
|
+
height: '100%',
|
|
17
|
+
width: 1,
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
},
|
|
20
|
+
rel: {
|
|
21
|
+
position: 'relative',
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
const OverviewRubberbandHoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
|
|
25
|
+
var _a;
|
|
26
|
+
const { classes } = useStyles();
|
|
27
|
+
const { cytobandOffset } = model;
|
|
28
|
+
const { assemblyManager } = (0, util_1.getSession)(model);
|
|
29
|
+
const px = overview.pxToBp(guideX - cytobandOffset);
|
|
30
|
+
const assembly = assemblyManager.get(px.assemblyName);
|
|
31
|
+
const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
|
|
32
|
+
px.coord < f.get('end') &&
|
|
33
|
+
px.refName === assembly.getCanonicalRefName(f.get('refName')));
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: guideX } }) }));
|
|
35
|
+
});
|
|
36
|
+
exports.default = OverviewRubberbandHoverTooltip;
|
|
@@ -6,14 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const ui_1 = require("@jbrowse/core/ui");
|
|
9
|
-
const util_1 = require("@jbrowse/core/util");
|
|
10
|
-
const product_core_1 = require("@jbrowse/product-core");
|
|
11
9
|
const mobx_react_1 = require("mobx-react");
|
|
12
10
|
const mui_1 = require("tss-react/mui");
|
|
13
11
|
const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
|
|
14
12
|
const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
|
|
15
13
|
const useRangeSelect_1 = require("./useRangeSelect");
|
|
16
|
-
const consts_1 = require("../consts");
|
|
17
14
|
const useStyles = (0, mui_1.makeStyles)()({
|
|
18
15
|
rubberbandControl: {
|
|
19
16
|
cursor: 'crosshair',
|
|
@@ -25,28 +22,13 @@ const useStyles = (0, mui_1.makeStyles)()({
|
|
|
25
22
|
const Rubberband = (0, mobx_react_1.observer)(function ({ model, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
|
|
26
23
|
const ref = (0, react_1.useRef)(null);
|
|
27
24
|
const { classes } = useStyles();
|
|
28
|
-
const
|
|
25
|
+
const { stickyViewHeaders, rubberbandTop } = model;
|
|
29
26
|
const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = (0, useRangeSelect_1.useRangeSelect)(ref, model);
|
|
30
|
-
|
|
31
|
-
if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
|
|
32
|
-
;
|
|
33
|
-
({ stickyViewHeaders } = session);
|
|
34
|
-
}
|
|
35
|
-
let rubberbandControlTop = 0;
|
|
36
|
-
if (stickyViewHeaders) {
|
|
37
|
-
rubberbandControlTop = ui_1.VIEW_HEADER_HEIGHT;
|
|
38
|
-
if (!model.hideHeader) {
|
|
39
|
-
rubberbandControlTop += consts_1.HEADER_BAR_HEIGHT;
|
|
40
|
-
if (!model.hideHeaderOverview) {
|
|
41
|
-
rubberbandControlTop += consts_1.HEADER_OVERVIEW_HEIGHT;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandControlTop, sticky: stickyViewHeaders })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
|
|
46
28
|
left: anchorPosition.clientX,
|
|
47
29
|
top: anchorPosition.clientY,
|
|
48
30
|
}, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
|
|
49
|
-
top:
|
|
31
|
+
top: rubberbandTop,
|
|
50
32
|
position: stickyViewHeaders ? 'sticky' : undefined,
|
|
51
33
|
}, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
|
|
52
34
|
});
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.default = RubberbandSpan;
|
|
4
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -6,6 +9,7 @@ const react_1 = require("react");
|
|
|
6
9
|
const util_1 = require("@jbrowse/core/util");
|
|
7
10
|
const material_1 = require("@mui/material");
|
|
8
11
|
const mui_1 = require("tss-react/mui");
|
|
12
|
+
const RubberbandTooltip_1 = __importDefault(require("./RubberbandTooltip"));
|
|
9
13
|
const useStyles = (0, mui_1.makeStyles)()(theme => {
|
|
10
14
|
const { tertiary } = theme.palette;
|
|
11
15
|
const background = (0, material_1.alpha)(tertiary.light, 0.7);
|
|
@@ -23,32 +27,14 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
|
|
|
23
27
|
minHeight: 8,
|
|
24
28
|
},
|
|
25
29
|
rubberbandText: {
|
|
26
|
-
color: tertiary.contrastText,
|
|
27
|
-
},
|
|
28
|
-
popover: {
|
|
29
|
-
mouseEvents: 'none',
|
|
30
|
-
cursor: 'crosshair',
|
|
31
|
-
},
|
|
32
|
-
paper: {
|
|
33
|
-
paddingLeft: theme.spacing(1),
|
|
34
|
-
paddingRight: theme.spacing(1),
|
|
30
|
+
color: theme.palette.tertiary.contrastText,
|
|
35
31
|
},
|
|
36
32
|
};
|
|
37
33
|
});
|
|
38
|
-
function Tooltip({ anchorEl, side, text, }) {
|
|
39
|
-
const { classes } = useStyles();
|
|
40
|
-
return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
|
|
41
|
-
vertical: 'top',
|
|
42
|
-
horizontal: side === 'left' ? 'right' : 'left',
|
|
43
|
-
}, transformOrigin: {
|
|
44
|
-
vertical: 'bottom',
|
|
45
|
-
horizontal: side === 'left' ? 'left' : 'right',
|
|
46
|
-
}, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
|
|
47
|
-
}
|
|
48
34
|
function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
|
|
49
35
|
const { classes } = useStyles();
|
|
50
36
|
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
37
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: (0, util_1.stringify)(leftBpOffset) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: (0, util_1.stringify)(rightBpOffset) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { ref: el => {
|
|
52
38
|
setAnchorEl(el);
|
|
53
39
|
}, variant: "h6", className: classes.rubberbandText, style: {
|
|
54
40
|
top,
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = RubberbandTooltip;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const mui_1 = require("tss-react/mui");
|
|
7
|
+
const useStyles = (0, mui_1.makeStyles)()(theme => {
|
|
8
|
+
return {
|
|
9
|
+
popover: {
|
|
10
|
+
mouseEvents: 'none',
|
|
11
|
+
cursor: 'crosshair',
|
|
12
|
+
},
|
|
13
|
+
paper: {
|
|
14
|
+
paddingLeft: theme.spacing(1),
|
|
15
|
+
paddingRight: theme.spacing(1),
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
function RubberbandTooltip({ anchorEl, side, text, }) {
|
|
20
|
+
const { classes } = useStyles();
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Popover, { className: classes.popover, classes: { paper: classes.paper }, open: true, anchorEl: anchorEl, anchorOrigin: {
|
|
22
|
+
vertical: 'top',
|
|
23
|
+
horizontal: side === 'left' ? 'left' : 'right',
|
|
24
|
+
}, transformOrigin: {
|
|
25
|
+
vertical: 'bottom',
|
|
26
|
+
horizontal: side === 'left' ? 'right' : 'left',
|
|
27
|
+
}, keepMounted: true, disableRestoreFocus: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text }) }));
|
|
28
|
+
}
|
|
@@ -62,7 +62,7 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
|
|
|
62
62
|
const { classes } = useStyles();
|
|
63
63
|
const { pluginManager } = (0, util_1.getEnv)(model);
|
|
64
64
|
const { mouseDown: mouseDown1, mouseUp } = (0, useSideScroll_1.useSideScroll)(model);
|
|
65
|
-
const { stickyViewHeaders,
|
|
65
|
+
const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine } = model;
|
|
66
66
|
const ref = (0, react_1.useRef)(null);
|
|
67
67
|
const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = (0, useRangeSelect_1.useRangeSelect)(ref, model, true);
|
|
68
68
|
(0, useWheelScroll_1.useWheelScroll)(ref, model);
|
|
@@ -70,7 +70,7 @@ const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ ch
|
|
|
70
70
|
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
|
|
71
71
|
mouseDown1(event);
|
|
72
72
|
mouseDown2(event);
|
|
73
|
-
}, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top:
|
|
73
|
+
}, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? (0, jsx_runtime_1.jsx)(Gridlines_1.default, { model: model }) : null, (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: showCenterLine ? (0, jsx_runtime_1.jsx)(CenterLine, { model: model }) : null }), guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
|
|
74
74
|
left: anchorPosition.clientX,
|
|
75
75
|
top: anchorPosition.clientY,
|
|
76
76
|
}, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.jsx)(Rubberband_1.default, { model: model, ControlComponent: (0, jsx_runtime_1.jsx)(Scalebar_1.default, { model: model, style: {
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
-
const ui_1 = require("@jbrowse/core/ui");
|
|
5
4
|
const util_1 = require("@jbrowse/core/util");
|
|
6
|
-
const product_core_1 = require("@jbrowse/product-core");
|
|
7
5
|
const material_1 = require("@mui/material");
|
|
8
6
|
const mobx_react_1 = require("mobx-react");
|
|
9
7
|
const mui_1 = require("tss-react/mui");
|
|
10
|
-
const consts_1 = require("../consts");
|
|
11
8
|
const useStyles = (0, mui_1.makeStyles)()({
|
|
12
9
|
guide: {
|
|
13
10
|
pointerEvents: 'none',
|
|
@@ -15,7 +12,7 @@ const useStyles = (0, mui_1.makeStyles)()({
|
|
|
15
12
|
width: 1,
|
|
16
13
|
position: 'absolute',
|
|
17
14
|
background: 'red',
|
|
18
|
-
zIndex:
|
|
15
|
+
zIndex: 1001,
|
|
19
16
|
},
|
|
20
17
|
tooltipTarget: {
|
|
21
18
|
position: 'sticky',
|
|
@@ -24,25 +21,10 @@ const useStyles = (0, mui_1.makeStyles)()({
|
|
|
24
21
|
});
|
|
25
22
|
const VerticalGuide = (0, mobx_react_1.observer)(function VerticalGuide({ model, coordX, }) {
|
|
26
23
|
const { classes } = useStyles();
|
|
27
|
-
const
|
|
28
|
-
let stickyViewHeaders = false;
|
|
29
|
-
if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
|
|
30
|
-
;
|
|
31
|
-
({ stickyViewHeaders } = session);
|
|
32
|
-
}
|
|
33
|
-
let tooltipTop = 0;
|
|
34
|
-
if (stickyViewHeaders) {
|
|
35
|
-
tooltipTop = ui_1.VIEW_HEADER_HEIGHT;
|
|
36
|
-
if (!model.hideHeader) {
|
|
37
|
-
tooltipTop += consts_1.HEADER_BAR_HEIGHT;
|
|
38
|
-
if (!model.hideHeaderOverview) {
|
|
39
|
-
tooltipTop += consts_1.HEADER_OVERVIEW_HEIGHT;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
24
|
+
const { stickyViewHeaders, rubberbandTop } = model;
|
|
43
25
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: (0, util_1.stringify)(model.pxToBp(coordX)), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.tooltipTarget, style: {
|
|
44
26
|
left: coordX + 6,
|
|
45
|
-
top:
|
|
27
|
+
top: rubberbandTop,
|
|
46
28
|
position: stickyViewHeaders ? 'sticky' : undefined,
|
|
47
29
|
} }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: { left: coordX } })] }));
|
|
48
30
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type { BpOffset, ExportSvgOptions, HighlightType, NavLocation } from './types';
|
|
2
|
+
import type { BpOffset, ExportSvgOptions, HighlightType, InitState, NavLocation } from './types';
|
|
3
3
|
import type PluginManager from '@jbrowse/core/PluginManager';
|
|
4
4
|
import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
|
|
5
5
|
import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
|
|
@@ -30,6 +30,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
30
30
|
highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
|
|
31
31
|
colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
32
32
|
showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
33
|
+
init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
|
|
33
34
|
}, {
|
|
34
35
|
width: number;
|
|
35
36
|
} & {
|
|
@@ -58,6 +59,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
58
59
|
readonly interRegionPaddingWidth: number;
|
|
59
60
|
readonly assemblyNames: string[];
|
|
60
61
|
readonly stickyViewHeaders: boolean;
|
|
62
|
+
readonly rubberbandTop: number;
|
|
61
63
|
readonly pinnedTracksTop: number;
|
|
62
64
|
} & {
|
|
63
65
|
scaleBarDisplayPrefix(): string | undefined;
|
|
@@ -144,6 +146,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
144
146
|
setDraggingTrackId(idx?: string): void;
|
|
145
147
|
setScaleFactor(factor: number): void;
|
|
146
148
|
clearView(): void;
|
|
149
|
+
setInit(arg?: InitState): void;
|
|
147
150
|
exportSvg(opts?: ExportSvgOptions): Promise<void>;
|
|
148
151
|
} & {
|
|
149
152
|
slide: (viewWidths: number) => void;
|
|
@@ -164,7 +167,6 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
164
167
|
readonly coarseVisibleLocStrings: string;
|
|
165
168
|
} & {
|
|
166
169
|
setCoarseDynamicBlocks(blocks: BlockSet): void;
|
|
167
|
-
afterAttach(): void;
|
|
168
170
|
} & {
|
|
169
171
|
moveTo(start?: BpOffset, end?: BpOffset): void;
|
|
170
172
|
navToLocString(input: string, optAssemblyName?: string): Promise<void>;
|
|
@@ -210,6 +212,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
210
212
|
} | undefined;
|
|
211
213
|
} & {
|
|
212
214
|
afterCreate(): void;
|
|
215
|
+
afterAttach(): void;
|
|
213
216
|
}, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
|
|
214
217
|
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
215
218
|
displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
@@ -232,7 +235,28 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
|
|
|
232
235
|
highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
|
|
233
236
|
colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
234
237
|
showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
|
|
235
|
-
|
|
238
|
+
init: import("mobx-state-tree").IType<InitState | undefined, InitState | undefined, InitState | undefined>;
|
|
239
|
+
}>>, {
|
|
240
|
+
type: string;
|
|
241
|
+
id: string;
|
|
242
|
+
displayName: string | undefined;
|
|
243
|
+
tracks: any[];
|
|
244
|
+
minimized: boolean;
|
|
245
|
+
displayedRegions: Region[];
|
|
246
|
+
offsetPx: number;
|
|
247
|
+
bpPerPx: number;
|
|
248
|
+
hideHeader: boolean;
|
|
249
|
+
hideHeaderOverview: boolean;
|
|
250
|
+
hideNoTracksActive: boolean;
|
|
251
|
+
trackSelectorType: string;
|
|
252
|
+
showCenterLine: boolean;
|
|
253
|
+
showCytobandsSetting: boolean;
|
|
254
|
+
trackLabels: string;
|
|
255
|
+
showGridlines: boolean;
|
|
256
|
+
highlight: HighlightType[];
|
|
257
|
+
colorByCDS: boolean;
|
|
258
|
+
showTrackOutlines: boolean;
|
|
259
|
+
}>;
|
|
236
260
|
export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
|
|
237
261
|
export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;
|
|
238
262
|
export { default as LinearGenomeView, default as ReactComponent, } from './components/LinearGenomeView';
|
|
@@ -93,6 +93,7 @@ function stateModelFactory(pluginManager) {
|
|
|
93
93
|
highlight: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.frozen()), []),
|
|
94
94
|
colorByCDS: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-colorByCDS', false)),
|
|
95
95
|
showTrackOutlines: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => (0, util_1.localStorageGetBoolean)('lgv-showTrackOutlines', true)),
|
|
96
|
+
init: mobx_state_tree_1.types.frozen(),
|
|
96
97
|
}))
|
|
97
98
|
.volatile(() => ({
|
|
98
99
|
volatileWidth: undefined,
|
|
@@ -141,10 +142,10 @@ function stateModelFactory(pluginManager) {
|
|
|
141
142
|
? session.stickyViewHeaders
|
|
142
143
|
: false;
|
|
143
144
|
},
|
|
144
|
-
get
|
|
145
|
+
get rubberbandTop() {
|
|
145
146
|
let pinnedTracksTop = 0;
|
|
146
147
|
if (this.stickyViewHeaders) {
|
|
147
|
-
pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT
|
|
148
|
+
pinnedTracksTop = ui_1.VIEW_HEADER_HEIGHT;
|
|
148
149
|
if (!self.hideHeader) {
|
|
149
150
|
pinnedTracksTop += consts_1.HEADER_BAR_HEIGHT;
|
|
150
151
|
if (!self.hideHeaderOverview) {
|
|
@@ -154,6 +155,9 @@ function stateModelFactory(pluginManager) {
|
|
|
154
155
|
}
|
|
155
156
|
return pinnedTracksTop;
|
|
156
157
|
},
|
|
158
|
+
get pinnedTracksTop() {
|
|
159
|
+
return this.rubberbandTop + consts_1.SCALE_BAR_HEIGHT;
|
|
160
|
+
},
|
|
157
161
|
}))
|
|
158
162
|
.views(self => ({
|
|
159
163
|
scaleBarDisplayPrefix() {
|
|
@@ -267,32 +271,32 @@ function stateModelFactory(pluginManager) {
|
|
|
267
271
|
return results;
|
|
268
272
|
},
|
|
269
273
|
rewriteOnClicks(trackType, viewMenuActions) {
|
|
270
|
-
|
|
274
|
+
for (const action of viewMenuActions) {
|
|
271
275
|
if ('subMenu' in action) {
|
|
272
276
|
this.rewriteOnClicks(trackType, action.subMenu);
|
|
273
277
|
}
|
|
274
278
|
if ('onClick' in action) {
|
|
275
279
|
const holdOnClick = action.onClick;
|
|
276
280
|
action.onClick = (...args) => {
|
|
277
|
-
self.tracks
|
|
281
|
+
for (const track of self.tracks) {
|
|
278
282
|
if (track.type === trackType) {
|
|
279
283
|
holdOnClick.apply(track, [track, ...args]);
|
|
280
284
|
}
|
|
281
|
-
}
|
|
285
|
+
}
|
|
282
286
|
};
|
|
283
287
|
}
|
|
284
|
-
}
|
|
288
|
+
}
|
|
285
289
|
},
|
|
286
290
|
get trackTypeActions() {
|
|
287
291
|
const allActions = new Map();
|
|
288
|
-
self.tracks
|
|
292
|
+
for (const track of self.tracks) {
|
|
289
293
|
const trackInMap = allActions.get(track.type);
|
|
290
294
|
if (!trackInMap) {
|
|
291
295
|
const viewMenuActions = structuredClone(track.viewMenuActions);
|
|
292
296
|
this.rewriteOnClicks(track.type, viewMenuActions);
|
|
293
297
|
allActions.set(track.type, viewMenuActions);
|
|
294
298
|
}
|
|
295
|
-
}
|
|
299
|
+
}
|
|
296
300
|
return allActions;
|
|
297
301
|
},
|
|
298
302
|
}))
|
|
@@ -417,11 +421,13 @@ function stateModelFactory(pluginManager) {
|
|
|
417
421
|
hideTrack(trackId) {
|
|
418
422
|
const schema = pluginManager.pluggableConfigSchemaType('track');
|
|
419
423
|
const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
|
|
420
|
-
const
|
|
424
|
+
const tracks = self.tracks.filter(t => t.configuration === conf);
|
|
421
425
|
(0, mobx_1.transaction)(() => {
|
|
422
|
-
|
|
426
|
+
for (const track of tracks) {
|
|
427
|
+
self.tracks.remove(track);
|
|
428
|
+
}
|
|
423
429
|
});
|
|
424
|
-
return
|
|
430
|
+
return tracks.length;
|
|
425
431
|
},
|
|
426
432
|
}))
|
|
427
433
|
.actions(self => ({
|
|
@@ -562,6 +568,9 @@ function stateModelFactory(pluginManager) {
|
|
|
562
568
|
self.scrollTo(0);
|
|
563
569
|
self.zoomTo(10);
|
|
564
570
|
},
|
|
571
|
+
setInit(arg) {
|
|
572
|
+
self.init = arg;
|
|
573
|
+
},
|
|
565
574
|
async exportSvg(opts = {}) {
|
|
566
575
|
const { renderToSvg } = await Promise.resolve().then(() => __importStar(require('./svgcomponents/SVGLinearGenomeView')));
|
|
567
576
|
const html = await renderToSvg(self, opts);
|
|
@@ -782,7 +791,9 @@ function stateModelFactory(pluginManager) {
|
|
|
782
791
|
for (const [key, value] of self.trackTypeActions.entries()) {
|
|
783
792
|
if (value.length) {
|
|
784
793
|
menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
|
|
785
|
-
|
|
794
|
+
for (const action of value) {
|
|
795
|
+
menuItems.push(action);
|
|
796
|
+
}
|
|
786
797
|
}
|
|
787
798
|
}
|
|
788
799
|
return menuItems;
|
|
@@ -824,20 +835,6 @@ function stateModelFactory(pluginManager) {
|
|
|
824
835
|
self.coarseDynamicBlocks = blocks.contentBlocks;
|
|
825
836
|
self.coarseTotalBp = blocks.totalBp;
|
|
826
837
|
},
|
|
827
|
-
afterAttach() {
|
|
828
|
-
(0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
|
|
829
|
-
if (self.initialized) {
|
|
830
|
-
this.setCoarseDynamicBlocks(self.dynamicBlocks);
|
|
831
|
-
}
|
|
832
|
-
}, { delay: 150 }));
|
|
833
|
-
(0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
|
|
834
|
-
const s = (s) => JSON.stringify(s);
|
|
835
|
-
const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
|
|
836
|
-
(0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
|
|
837
|
-
(0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
|
|
838
|
-
(0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
|
|
839
|
-
}));
|
|
840
|
-
},
|
|
841
838
|
}))
|
|
842
839
|
.actions(self => ({
|
|
843
840
|
moveTo(start, end) {
|
|
@@ -1004,6 +1001,33 @@ function stateModelFactory(pluginManager) {
|
|
|
1004
1001
|
document.removeEventListener('keydown', handler);
|
|
1005
1002
|
});
|
|
1006
1003
|
},
|
|
1004
|
+
afterAttach() {
|
|
1005
|
+
(0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
|
|
1006
|
+
var _a;
|
|
1007
|
+
const { init } = self;
|
|
1008
|
+
if (init) {
|
|
1009
|
+
self
|
|
1010
|
+
.navToLocString(init.loc, init.assembly)
|
|
1011
|
+
.catch((e) => {
|
|
1012
|
+
(0, util_1.getSession)(self).notifyError(`${e}`, e);
|
|
1013
|
+
});
|
|
1014
|
+
(_a = init.tracks) === null || _a === void 0 ? void 0 : _a.map(t => self.showTrack(t));
|
|
1015
|
+
self.setInit(undefined);
|
|
1016
|
+
}
|
|
1017
|
+
}));
|
|
1018
|
+
(0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
|
|
1019
|
+
if (self.initialized) {
|
|
1020
|
+
self.setCoarseDynamicBlocks(self.dynamicBlocks);
|
|
1021
|
+
}
|
|
1022
|
+
}, { delay: 150 }));
|
|
1023
|
+
(0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
|
|
1024
|
+
const s = (s) => JSON.stringify(s);
|
|
1025
|
+
const { showCytobandsSetting, showCenterLine, colorByCDS } = self;
|
|
1026
|
+
(0, util_1.localStorageSetItem)('lgv-showCytobands', s(showCytobandsSetting));
|
|
1027
|
+
(0, util_1.localStorageSetItem)('lgv-showCenterLine', s(showCenterLine));
|
|
1028
|
+
(0, util_1.localStorageSetItem)('lgv-colorByCDS', s(colorByCDS));
|
|
1029
|
+
}));
|
|
1030
|
+
},
|
|
1007
1031
|
}))
|
|
1008
1032
|
.preProcessSnapshot(snap => {
|
|
1009
1033
|
if (!snap) {
|
|
@@ -1016,6 +1040,15 @@ function stateModelFactory(pluginManager) {
|
|
|
1016
1040
|
: [highlight],
|
|
1017
1041
|
...rest,
|
|
1018
1042
|
};
|
|
1043
|
+
})
|
|
1044
|
+
.postProcessSnapshot(snap => {
|
|
1045
|
+
if (!snap) {
|
|
1046
|
+
return snap;
|
|
1047
|
+
}
|
|
1048
|
+
else {
|
|
1049
|
+
const { init, ...rest } = snap;
|
|
1050
|
+
return rest;
|
|
1051
|
+
}
|
|
1019
1052
|
});
|
|
1020
1053
|
}
|
|
1021
1054
|
var LinearGenomeView_1 = require("./components/LinearGenomeView");
|