@jbrowse/plugin-dotplot-view 2.9.0 → 2.10.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.
- package/dist/DotplotView/components/Axes.js +4 -11
- package/dist/DotplotView/components/DotplotTooltip.d.ts +3 -4
- package/dist/DotplotView/components/DotplotTooltip.js +38 -81
- package/dist/DotplotView/components/DotplotView.js +18 -14
- package/dist/DotplotView/model.d.ts +65 -77
- package/dist/DotplotView/model.js +11 -8
- package/dist/DotplotView/svgcomponents/SVGDotplotView.js +5 -3
- package/esm/DotplotView/components/Axes.js +4 -11
- package/esm/DotplotView/components/DotplotTooltip.d.ts +3 -4
- package/esm/DotplotView/components/DotplotTooltip.js +37 -60
- package/esm/DotplotView/components/DotplotView.js +18 -14
- package/esm/DotplotView/model.d.ts +65 -77
- package/esm/DotplotView/model.js +12 -9
- package/esm/DotplotView/svgcomponents/SVGDotplotView.js +5 -3
- package/package.json +4 -5
|
@@ -67,15 +67,10 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
67
67
|
const xoff = Math.floor(x - hview.offsetPx);
|
|
68
68
|
return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
|
|
69
69
|
}),
|
|
70
|
-
ticks.map(([tick, x]) => {
|
|
71
|
-
return (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
|
|
72
|
-
}),
|
|
70
|
+
ticks.map(([tick, x]) => x > 0 && x < width ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
|
|
73
71
|
ticks
|
|
74
72
|
.filter(t => t[0].type === 'major')
|
|
75
|
-
.map(([tick, x]) => {
|
|
76
|
-
const y = 0;
|
|
77
|
-
return x > 10 ? (react_1.default.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
|
|
78
|
-
}),
|
|
73
|
+
.map(([tick, x]) => x > 10 && x < width ? (react_1.default.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
|
|
79
74
|
react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, fill: theme.palette.text.primary, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging" }, hview.assemblyNames.join(','))));
|
|
80
75
|
});
|
|
81
76
|
exports.VerticalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
@@ -118,11 +113,9 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
118
113
|
const yoff = Math.floor(viewHeight - y + offsetPx);
|
|
119
114
|
return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
|
|
120
115
|
}),
|
|
121
|
-
ticks.map(([tick, y]) => (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] }))),
|
|
116
|
+
ticks.map(([tick, y]) => y > 0 ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
|
|
122
117
|
ticks
|
|
123
118
|
.filter(t => t[0].type === 'major')
|
|
124
|
-
.map(([tick, y]) => {
|
|
125
|
-
return y > 10 ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
|
|
126
|
-
}),
|
|
119
|
+
.map(([tick, y]) => y > 10 && y < viewHeight ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
|
|
127
120
|
react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));
|
|
128
121
|
});
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DotplotViewModel } from '../model';
|
|
3
3
|
type Coord = [number, number] | undefined;
|
|
4
|
-
export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance,
|
|
4
|
+
export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, }: {
|
|
5
5
|
model: DotplotViewModel;
|
|
6
6
|
mouserect: Coord;
|
|
7
7
|
mouserectClient: Coord;
|
|
8
8
|
xdistance: number;
|
|
9
|
-
|
|
10
|
-
}) => React.JSX.Element;
|
|
9
|
+
}) => React.JSX.Element | null;
|
|
11
10
|
export declare const TooltipWhereClicked: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
|
|
12
11
|
model: DotplotViewModel;
|
|
13
12
|
mousedown: Coord;
|
|
14
13
|
mousedownClient: Coord;
|
|
15
14
|
xdistance: number;
|
|
16
15
|
ydistance: number;
|
|
17
|
-
}) => React.JSX.Element;
|
|
16
|
+
}) => React.JSX.Element | null;
|
|
18
17
|
export {};
|
|
@@ -1,35 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
4
|
};
|
|
25
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
6
|
exports.TooltipWhereClicked = exports.TooltipWhereMouseovered = void 0;
|
|
27
|
-
const react_1 =
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
28
8
|
const mobx_react_1 = require("mobx-react");
|
|
29
9
|
const mui_1 = require("tss-react/mui");
|
|
30
10
|
const util_1 = require("./util");
|
|
31
11
|
const material_1 = require("@mui/material");
|
|
32
|
-
const
|
|
12
|
+
const react_2 = require("@floating-ui/react");
|
|
33
13
|
function round(value) {
|
|
34
14
|
return Math.round(value * 1e5) / 1e5;
|
|
35
15
|
}
|
|
@@ -50,77 +30,54 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
|
|
|
50
30
|
wordWrap: 'break-word',
|
|
51
31
|
},
|
|
52
32
|
}));
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
var _a;
|
|
33
|
+
exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
|
|
34
|
+
var _a, _b;
|
|
56
35
|
const { classes } = useStyles();
|
|
57
36
|
const { hview, vview, viewHeight } = model;
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
const rect = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
|
|
61
|
-
const offset = 6;
|
|
62
|
-
const w = rect.height + offset * 2;
|
|
63
|
-
// must be memoized a la https://github.com/popperjs/react-popper/issues/391
|
|
64
|
-
const virtElement = (0, react_1.useMemo)(() => ({
|
|
65
|
-
getBoundingClientRect: () => {
|
|
66
|
-
const x = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[0]) || 0) - (xdistance < 0 ? w : 0);
|
|
67
|
-
const y = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[1]) || 0) - (ydistance < 0 ? w : 0);
|
|
68
|
-
return {
|
|
69
|
-
top: y,
|
|
70
|
-
left: x,
|
|
71
|
-
bottom: y,
|
|
72
|
-
right: x,
|
|
73
|
-
width: 0,
|
|
74
|
-
height: 0,
|
|
75
|
-
x,
|
|
76
|
-
y,
|
|
77
|
-
toJSON() { },
|
|
78
|
-
};
|
|
79
|
-
},
|
|
80
|
-
}), [mouserectClient, xdistance, ydistance, w]);
|
|
81
|
-
const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl, {
|
|
37
|
+
const theme = (0, material_1.useTheme)();
|
|
38
|
+
const { refs, floatingStyles, context } = (0, react_2.useFloating)({
|
|
82
39
|
placement: xdistance < 0 ? 'left' : 'right',
|
|
83
40
|
});
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
41
|
+
const clientPoint = (0, react_2.useClientPoint)(context, mouserectClient
|
|
42
|
+
? {
|
|
43
|
+
x: mouserectClient[0],
|
|
44
|
+
y: mouserectClient[1],
|
|
45
|
+
}
|
|
46
|
+
: undefined);
|
|
47
|
+
const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
|
|
48
|
+
const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
|
|
49
|
+
return mouserect ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
|
|
50
|
+
react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
|
|
51
|
+
...floatingStyles,
|
|
52
|
+
zIndex: 100000,
|
|
53
|
+
pointerEvents: 'none',
|
|
54
|
+
}, ...getFloatingProps() },
|
|
88
55
|
`x - ${(0, util_1.locstr)(mouserect[0], hview)}`,
|
|
89
56
|
react_1.default.createElement("br", null),
|
|
90
57
|
`y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`,
|
|
91
|
-
react_1.default.createElement("br", null)))) : null
|
|
58
|
+
react_1.default.createElement("br", null)))) : null;
|
|
92
59
|
});
|
|
93
60
|
exports.TooltipWhereClicked = (0, mobx_react_1.observer)(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
|
|
61
|
+
var _a, _b;
|
|
94
62
|
const { classes } = useStyles();
|
|
95
63
|
const { hview, vview, viewHeight } = model;
|
|
96
|
-
const
|
|
97
|
-
|
|
98
|
-
const
|
|
99
|
-
|
|
100
|
-
const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
|
|
101
|
-
const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
|
|
102
|
-
return {
|
|
103
|
-
top: y,
|
|
104
|
-
left: x,
|
|
105
|
-
bottom: y,
|
|
106
|
-
right: x,
|
|
107
|
-
width: 0,
|
|
108
|
-
height: 0,
|
|
109
|
-
x,
|
|
110
|
-
y,
|
|
111
|
-
toJSON() { },
|
|
112
|
-
};
|
|
113
|
-
},
|
|
114
|
-
}), [mousedownClient, xdistance, ydistance]);
|
|
115
|
-
const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl, {
|
|
64
|
+
const theme = (0, material_1.useTheme)();
|
|
65
|
+
const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
|
|
66
|
+
const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
|
|
67
|
+
const { refs, floatingStyles, context } = (0, react_2.useFloating)({
|
|
116
68
|
placement: xdistance < 0 ? 'right' : 'left',
|
|
117
69
|
});
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
70
|
+
const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
|
|
71
|
+
const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
|
|
72
|
+
const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
|
|
73
|
+
return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
|
|
74
|
+
react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
|
|
75
|
+
...floatingStyles,
|
|
76
|
+
zIndex: 100000,
|
|
77
|
+
pointerEvents: 'none',
|
|
78
|
+
}, ...getFloatingProps() },
|
|
122
79
|
`x - ${(0, util_1.locstr)(mousedown[0], hview)}`,
|
|
123
80
|
react_1.default.createElement("br", null),
|
|
124
81
|
`y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`,
|
|
125
|
-
react_1.default.createElement("br", null)))) : null
|
|
82
|
+
react_1.default.createElement("br", null)))) : null;
|
|
126
83
|
});
|
|
@@ -109,8 +109,8 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
109
109
|
const mousedown = getOffset(mousedownClient, svg);
|
|
110
110
|
const mousecurr = getOffset(mousecurrClient, svg);
|
|
111
111
|
const mouseup = getOffset(mouseupClient, svg);
|
|
112
|
-
const mouserectClient = mouseupClient || mousecurrClient;
|
|
113
112
|
const mouserect = mouseup || mousecurr;
|
|
113
|
+
const mouserectClient = mouseupClient || mousecurrClient;
|
|
114
114
|
const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
|
|
115
115
|
const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
|
|
116
116
|
const { hview, vview, wheelMode, cursorMode } = model;
|
|
@@ -175,22 +175,26 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
175
175
|
hview,
|
|
176
176
|
vview,
|
|
177
177
|
]);
|
|
178
|
-
// detect a mouseup after a mousedown was submitted, autoremoves mouseup
|
|
179
|
-
//
|
|
178
|
+
// detect a mouseup after a mousedown was submitted, autoremoves mouseup once
|
|
179
|
+
// that single mouseup is set
|
|
180
180
|
(0, react_1.useEffect)(() => {
|
|
181
|
-
function globalMouseUp(event) {
|
|
182
|
-
if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
|
|
183
|
-
setMouseUpClient([event.clientX, event.clientY]);
|
|
184
|
-
}
|
|
185
|
-
else {
|
|
186
|
-
setMouseDownClient(undefined);
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
181
|
if (mousedown && !mouseup) {
|
|
182
|
+
function globalMouseUp(event) {
|
|
183
|
+
if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
|
|
184
|
+
setMouseUpClient([event.clientX, event.clientY]);
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
setMouseDownClient(undefined);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
190
|
window.addEventListener('mouseup', globalMouseUp, true);
|
|
191
|
-
return () =>
|
|
191
|
+
return () => {
|
|
192
|
+
window.removeEventListener('mouseup', globalMouseUp, true);
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
return () => { };
|
|
192
197
|
}
|
|
193
|
-
return () => { };
|
|
194
198
|
}, [
|
|
195
199
|
validSelect,
|
|
196
200
|
mousedown,
|
|
@@ -213,7 +217,7 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
213
217
|
react_1.default.createElement(Axes_1.VerticalAxis, { model: model }),
|
|
214
218
|
react_1.default.createElement(Axes_1.HorizontalAxis, { model: model }),
|
|
215
219
|
react_1.default.createElement("div", { ref: ref, className: classes.content },
|
|
216
|
-
mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance
|
|
220
|
+
mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
|
|
217
221
|
validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
|
|
218
222
|
react_1.default.createElement("div", { style: { cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }, onMouseDown: event => {
|
|
219
223
|
if (event.button === 0) {
|
|
@@ -7,13 +7,16 @@ type Coord = [number, number];
|
|
|
7
7
|
export interface ExportSvgOptions {
|
|
8
8
|
rasterizeLayers?: boolean;
|
|
9
9
|
filename?: string;
|
|
10
|
-
Wrapper?: React.FC<
|
|
10
|
+
Wrapper?: React.FC<{
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}>;
|
|
11
13
|
themeName?: string;
|
|
12
14
|
}
|
|
13
15
|
/**
|
|
14
16
|
* #stateModel DotplotView
|
|
15
17
|
* #category view
|
|
16
|
-
* extends
|
|
18
|
+
* extends
|
|
19
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
17
20
|
*/
|
|
18
21
|
export default function stateModelFactory(pm: PluginManager): import("mobx-state-tree").IModelType<{
|
|
19
22
|
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
@@ -59,23 +62,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
59
62
|
readonly assemblyNames: string[];
|
|
60
63
|
readonly displayedRegionsTotalPx: number;
|
|
61
64
|
readonly maxOffset: number;
|
|
62
|
-
readonly minOffset: number;
|
|
63
|
-
* #stateModel DotplotView
|
|
64
|
-
* #category view
|
|
65
|
-
* extends `BaseViewModel`
|
|
66
|
-
*/
|
|
65
|
+
readonly minOffset: number;
|
|
67
66
|
readonly totalBp: number;
|
|
68
67
|
} & {
|
|
69
68
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
70
69
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
71
|
-
readonly currBp: number;
|
|
72
|
-
* #property
|
|
73
|
-
*/
|
|
70
|
+
readonly currBp: number;
|
|
74
71
|
} & {
|
|
75
72
|
pxToBp(px: number): {
|
|
76
|
-
coord: number;
|
|
77
|
-
* #property
|
|
78
|
-
*/
|
|
73
|
+
coord: number;
|
|
79
74
|
index: number;
|
|
80
75
|
refName: string;
|
|
81
76
|
oob: boolean;
|
|
@@ -94,18 +89,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
94
89
|
* #property
|
|
95
90
|
*/
|
|
96
91
|
coord: number;
|
|
97
|
-
regionNumber?: number | undefined;
|
|
92
|
+
regionNumber?: number | undefined; /**
|
|
93
|
+
* #property
|
|
94
|
+
*/
|
|
98
95
|
}): number | undefined;
|
|
99
96
|
} & {
|
|
100
97
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
101
98
|
showAllRegions(): void;
|
|
102
|
-
zoomOut(): void;
|
|
103
|
-
* #property
|
|
104
|
-
*/
|
|
99
|
+
zoomOut(): void;
|
|
105
100
|
zoomIn(): void;
|
|
106
101
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
107
102
|
scrollTo(offsetPx: number): number;
|
|
108
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
103
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
104
|
+
* #property
|
|
105
|
+
* this represents tracks specific to this view specifically used
|
|
106
|
+
* for read vs ref dotplots where this track would not really apply
|
|
107
|
+
* elsewhere
|
|
108
|
+
*/
|
|
109
109
|
scroll(distance: number): number;
|
|
110
110
|
} & {
|
|
111
111
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -150,23 +150,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
150
150
|
readonly assemblyNames: string[];
|
|
151
151
|
readonly displayedRegionsTotalPx: number;
|
|
152
152
|
readonly maxOffset: number;
|
|
153
|
-
readonly minOffset: number;
|
|
154
|
-
* #stateModel DotplotView
|
|
155
|
-
* #category view
|
|
156
|
-
* extends `BaseViewModel`
|
|
157
|
-
*/
|
|
153
|
+
readonly minOffset: number;
|
|
158
154
|
readonly totalBp: number;
|
|
159
155
|
} & {
|
|
160
156
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
161
157
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
162
|
-
readonly currBp: number;
|
|
163
|
-
* #property
|
|
164
|
-
*/
|
|
158
|
+
readonly currBp: number;
|
|
165
159
|
} & {
|
|
166
160
|
pxToBp(px: number): {
|
|
167
|
-
coord: number;
|
|
168
|
-
* #property
|
|
169
|
-
*/
|
|
161
|
+
coord: number;
|
|
170
162
|
index: number;
|
|
171
163
|
refName: string;
|
|
172
164
|
oob: boolean;
|
|
@@ -185,18 +177,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
185
177
|
* #property
|
|
186
178
|
*/
|
|
187
179
|
coord: number;
|
|
188
|
-
regionNumber?: number | undefined;
|
|
180
|
+
regionNumber?: number | undefined; /**
|
|
181
|
+
* #property
|
|
182
|
+
*/
|
|
189
183
|
}): number | undefined;
|
|
190
184
|
} & {
|
|
191
185
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
192
186
|
showAllRegions(): void;
|
|
193
|
-
zoomOut(): void;
|
|
194
|
-
* #property
|
|
195
|
-
*/
|
|
187
|
+
zoomOut(): void;
|
|
196
188
|
zoomIn(): void;
|
|
197
189
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
198
190
|
scrollTo(offsetPx: number): number;
|
|
199
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
191
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
192
|
+
* #property
|
|
193
|
+
* this represents tracks specific to this view specifically used
|
|
194
|
+
* for read vs ref dotplots where this track would not really apply
|
|
195
|
+
* elsewhere
|
|
196
|
+
*/
|
|
200
197
|
scroll(distance: number): number;
|
|
201
198
|
} & {
|
|
202
199
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -233,9 +230,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
233
230
|
} & {
|
|
234
231
|
setMinimized(flag: boolean): void;
|
|
235
232
|
showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
|
|
236
|
-
/**
|
|
237
|
-
* #property
|
|
238
|
-
*/
|
|
239
233
|
hideDisplay(displayId: string): number; /**
|
|
240
234
|
* #property
|
|
241
235
|
*/
|
|
@@ -243,18 +237,20 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
243
237
|
} & {
|
|
244
238
|
trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
|
|
245
239
|
type: string;
|
|
246
|
-
label: string;
|
|
240
|
+
label: string; /**
|
|
241
|
+
* #property
|
|
242
|
+
*/
|
|
247
243
|
subMenu: {
|
|
248
244
|
type: string;
|
|
249
245
|
label: string; /**
|
|
250
246
|
* #property
|
|
251
247
|
*/
|
|
252
248
|
checked: boolean;
|
|
253
|
-
onClick: () => void;
|
|
249
|
+
onClick: () => void; /**
|
|
250
|
+
* #property
|
|
251
|
+
*/
|
|
254
252
|
}[];
|
|
255
|
-
})[];
|
|
256
|
-
* #property
|
|
257
|
-
*/
|
|
253
|
+
})[];
|
|
258
254
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
259
255
|
viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
|
|
260
256
|
}, {
|
|
@@ -362,23 +358,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
362
358
|
readonly assemblyNames: string[];
|
|
363
359
|
readonly displayedRegionsTotalPx: number;
|
|
364
360
|
readonly maxOffset: number;
|
|
365
|
-
readonly minOffset: number;
|
|
366
|
-
* #stateModel DotplotView
|
|
367
|
-
* #category view
|
|
368
|
-
* extends `BaseViewModel`
|
|
369
|
-
*/
|
|
361
|
+
readonly minOffset: number;
|
|
370
362
|
readonly totalBp: number;
|
|
371
363
|
} & {
|
|
372
364
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
373
365
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
374
|
-
readonly currBp: number;
|
|
375
|
-
* #property
|
|
376
|
-
*/
|
|
366
|
+
readonly currBp: number;
|
|
377
367
|
} & {
|
|
378
368
|
pxToBp(px: number): {
|
|
379
|
-
coord: number;
|
|
380
|
-
* #property
|
|
381
|
-
*/
|
|
369
|
+
coord: number;
|
|
382
370
|
index: number;
|
|
383
371
|
refName: string;
|
|
384
372
|
oob: boolean;
|
|
@@ -397,18 +385,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
397
385
|
* #property
|
|
398
386
|
*/
|
|
399
387
|
coord: number;
|
|
400
|
-
regionNumber?: number | undefined;
|
|
388
|
+
regionNumber?: number | undefined; /**
|
|
389
|
+
* #property
|
|
390
|
+
*/
|
|
401
391
|
}): number | undefined;
|
|
402
392
|
} & {
|
|
403
393
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
404
394
|
showAllRegions(): void;
|
|
405
|
-
zoomOut(): void;
|
|
406
|
-
* #property
|
|
407
|
-
*/
|
|
395
|
+
zoomOut(): void;
|
|
408
396
|
zoomIn(): void;
|
|
409
397
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
410
398
|
scrollTo(offsetPx: number): number;
|
|
411
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
399
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
400
|
+
* #property
|
|
401
|
+
* this represents tracks specific to this view specifically used
|
|
402
|
+
* for read vs ref dotplots where this track would not really apply
|
|
403
|
+
* elsewhere
|
|
404
|
+
*/
|
|
412
405
|
scroll(distance: number): number;
|
|
413
406
|
} & {
|
|
414
407
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -452,23 +445,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
452
445
|
readonly assemblyNames: string[];
|
|
453
446
|
readonly displayedRegionsTotalPx: number;
|
|
454
447
|
readonly maxOffset: number;
|
|
455
|
-
readonly minOffset: number;
|
|
456
|
-
* #stateModel DotplotView
|
|
457
|
-
* #category view
|
|
458
|
-
* extends `BaseViewModel`
|
|
459
|
-
*/
|
|
448
|
+
readonly minOffset: number;
|
|
460
449
|
readonly totalBp: number;
|
|
461
450
|
} & {
|
|
462
451
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
463
452
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
464
|
-
readonly currBp: number;
|
|
465
|
-
* #property
|
|
466
|
-
*/
|
|
453
|
+
readonly currBp: number;
|
|
467
454
|
} & {
|
|
468
455
|
pxToBp(px: number): {
|
|
469
|
-
coord: number;
|
|
470
|
-
* #property
|
|
471
|
-
*/
|
|
456
|
+
coord: number;
|
|
472
457
|
index: number;
|
|
473
458
|
refName: string;
|
|
474
459
|
oob: boolean;
|
|
@@ -487,18 +472,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
487
472
|
* #property
|
|
488
473
|
*/
|
|
489
474
|
coord: number;
|
|
490
|
-
regionNumber?: number | undefined;
|
|
475
|
+
regionNumber?: number | undefined; /**
|
|
476
|
+
* #property
|
|
477
|
+
*/
|
|
491
478
|
}): number | undefined;
|
|
492
479
|
} & {
|
|
493
480
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
494
481
|
showAllRegions(): void;
|
|
495
|
-
zoomOut(): void;
|
|
496
|
-
* #property
|
|
497
|
-
*/
|
|
482
|
+
zoomOut(): void;
|
|
498
483
|
zoomIn(): void;
|
|
499
484
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
500
485
|
scrollTo(offsetPx: number): number;
|
|
501
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
486
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
487
|
+
* #property
|
|
488
|
+
* this represents tracks specific to this view specifically used
|
|
489
|
+
* for read vs ref dotplots where this track would not really apply
|
|
490
|
+
* elsewhere
|
|
491
|
+
*/
|
|
502
492
|
scroll(distance: number): number;
|
|
503
493
|
} & {
|
|
504
494
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -603,9 +593,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
603
593
|
* #action
|
|
604
594
|
*/
|
|
605
595
|
getCoords(mousedown: Coord, mouseup: Coord): {
|
|
606
|
-
coord: number;
|
|
607
|
-
* #property
|
|
608
|
-
*/
|
|
596
|
+
coord: number;
|
|
609
597
|
index: number;
|
|
610
598
|
refName: string;
|
|
611
599
|
oob: boolean;
|
|
@@ -46,19 +46,22 @@ const util_2 = require("./components/util");
|
|
|
46
46
|
// lazies
|
|
47
47
|
const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
|
|
48
48
|
const ReturnToImportFormDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ReturnToImportFormDialog'))));
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
function stringLenPx(a) {
|
|
50
|
+
return (0, util_1.measureText)(a.slice(0, 30));
|
|
51
|
+
}
|
|
52
|
+
function pxWidthForBlocks(blocks, bpPerPx, hide) {
|
|
51
53
|
return (0, util_1.max)([
|
|
52
|
-
...blocks.filter(b => !hide.has(b.key)).map(b =>
|
|
54
|
+
...blocks.filter(b => !hide.has(b.key)).map(b => stringLenPx(b.refName)),
|
|
53
55
|
...blocks
|
|
54
56
|
.filter(b => !hide.has(b.key))
|
|
55
|
-
.map(b =>
|
|
57
|
+
.map(b => stringLenPx((0, util_1.getTickDisplayStr)(b.end, bpPerPx))),
|
|
56
58
|
]);
|
|
57
|
-
}
|
|
59
|
+
}
|
|
58
60
|
/**
|
|
59
61
|
* #stateModel DotplotView
|
|
60
62
|
* #category view
|
|
61
|
-
* extends
|
|
63
|
+
* extends
|
|
64
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
62
65
|
*/
|
|
63
66
|
function stateModelFactory(pm) {
|
|
64
67
|
return mobx_state_tree_1.types
|
|
@@ -561,8 +564,8 @@ function stateModelFactory(pm) {
|
|
|
561
564
|
const voffset = vview.offsetPx;
|
|
562
565
|
const vhide = (0, util_2.getBlockLabelKeysToHide)(vblocks, viewHeight, voffset);
|
|
563
566
|
const hhide = (0, util_2.getBlockLabelKeysToHide)(hblocks, viewWidth, hoffset);
|
|
564
|
-
const by = pxWidthForBlocks(hblocks, hhide);
|
|
565
|
-
const bx = pxWidthForBlocks(vblocks, vhide);
|
|
567
|
+
const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
|
|
568
|
+
const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
|
|
566
569
|
// these are set via autorun to avoid dependency cycle
|
|
567
570
|
self.setBorderY(Math.max(by + padding, 50));
|
|
568
571
|
self.setBorderX(Math.max(bx + padding, 50));
|
|
@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.renderToSvg = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const server_1 = require("react-dom/server");
|
|
9
8
|
const mobx_1 = require("mobx");
|
|
10
9
|
const util_1 = require("@jbrowse/core/util");
|
|
11
10
|
const material_1 = require("@mui/material");
|
|
12
11
|
const ui_1 = require("@jbrowse/core/ui");
|
|
12
|
+
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
13
13
|
const Grid_1 = require("../components/Grid");
|
|
14
14
|
const Axes_1 = require("../components/Axes");
|
|
15
15
|
const SVGBackground_1 = __importDefault(require("./SVGBackground"));
|
|
@@ -18,6 +18,8 @@ async function renderToSvg(model, opts) {
|
|
|
18
18
|
var _a;
|
|
19
19
|
await (0, mobx_1.when)(() => model.initialized);
|
|
20
20
|
const { themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children) } = opts;
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
|
+
const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
|
|
21
23
|
const session = (0, util_1.getSession)(model);
|
|
22
24
|
const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
|
|
23
25
|
const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
|
|
@@ -29,7 +31,7 @@ async function renderToSvg(model, opts) {
|
|
|
29
31
|
}));
|
|
30
32
|
const w = width + shift * 2;
|
|
31
33
|
// the xlink namespace is used for rendering <image> tag
|
|
32
|
-
return (0,
|
|
34
|
+
return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
|
|
33
35
|
react_1.default.createElement(Wrapper, null,
|
|
34
36
|
react_1.default.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString() },
|
|
35
37
|
react_1.default.createElement(SVGBackground_1.default, { width: w, height: height }),
|
|
@@ -41,6 +43,6 @@ async function renderToSvg(model, opts) {
|
|
|
41
43
|
react_1.default.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
|
|
42
44
|
react_1.default.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (react_1.default.createElement("g", { key: i }, result))))),
|
|
43
45
|
react_1.default.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
|
|
44
|
-
react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))));
|
|
46
|
+
react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))), createRootFn);
|
|
45
47
|
}
|
|
46
48
|
exports.renderToSvg = renderToSvg;
|
|
@@ -61,15 +61,10 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
|
|
|
61
61
|
const xoff = Math.floor(x - hview.offsetPx);
|
|
62
62
|
return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
|
|
63
63
|
}),
|
|
64
|
-
ticks.map(([tick, x]) => {
|
|
65
|
-
return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
|
|
66
|
-
}),
|
|
64
|
+
ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
|
|
67
65
|
ticks
|
|
68
66
|
.filter(t => t[0].type === 'major')
|
|
69
|
-
.map(([tick, x]) => {
|
|
70
|
-
const y = 0;
|
|
71
|
-
return x > 10 ? (React.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
|
|
72
|
-
}),
|
|
67
|
+
.map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
|
|
73
68
|
React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, fill: theme.palette.text.primary, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging" }, hview.assemblyNames.join(','))));
|
|
74
69
|
});
|
|
75
70
|
export const VerticalAxis = observer(function ({ model, }) {
|
|
@@ -112,11 +107,9 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
|
|
|
112
107
|
const yoff = Math.floor(viewHeight - y + offsetPx);
|
|
113
108
|
return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
|
|
114
109
|
}),
|
|
115
|
-
ticks.map(([tick, y]) => (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] }))),
|
|
110
|
+
ticks.map(([tick, y]) => y > 0 ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
|
|
116
111
|
ticks
|
|
117
112
|
.filter(t => t[0].type === 'major')
|
|
118
|
-
.map(([tick, y]) => {
|
|
119
|
-
return y > 10 ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
|
|
120
|
-
}),
|
|
113
|
+
.map(([tick, y]) => y > 10 && y < viewHeight ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
|
|
121
114
|
React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));
|
|
122
115
|
});
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DotplotViewModel } from '../model';
|
|
3
3
|
type Coord = [number, number] | undefined;
|
|
4
|
-
export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance,
|
|
4
|
+
export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, }: {
|
|
5
5
|
model: DotplotViewModel;
|
|
6
6
|
mouserect: Coord;
|
|
7
7
|
mouserectClient: Coord;
|
|
8
8
|
xdistance: number;
|
|
9
|
-
|
|
10
|
-
}) => React.JSX.Element;
|
|
9
|
+
}) => React.JSX.Element | null;
|
|
11
10
|
export declare const TooltipWhereClicked: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
|
|
12
11
|
model: DotplotViewModel;
|
|
13
12
|
mousedown: Coord;
|
|
14
13
|
mousedownClient: Coord;
|
|
15
14
|
xdistance: number;
|
|
16
15
|
ydistance: number;
|
|
17
|
-
}) => React.JSX.Element;
|
|
16
|
+
}) => React.JSX.Element | null;
|
|
18
17
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import { makeStyles } from 'tss-react/mui';
|
|
4
4
|
import { locstr } from './util';
|
|
5
|
-
import { Portal, alpha } from '@mui/material';
|
|
6
|
-
import {
|
|
5
|
+
import { Portal, alpha, useTheme } from '@mui/material';
|
|
6
|
+
import { useFloating, useClientPoint, useInteractions, } from '@floating-ui/react';
|
|
7
7
|
function round(value) {
|
|
8
8
|
return Math.round(value * 1e5) / 1e5;
|
|
9
9
|
}
|
|
@@ -24,77 +24,54 @@ const useStyles = makeStyles()(theme => ({
|
|
|
24
24
|
wordWrap: 'break-word',
|
|
25
25
|
},
|
|
26
26
|
}));
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
var _a;
|
|
27
|
+
export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
|
|
28
|
+
var _a, _b;
|
|
30
29
|
const { classes } = useStyles();
|
|
31
30
|
const { hview, vview, viewHeight } = model;
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const rect = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
|
|
35
|
-
const offset = 6;
|
|
36
|
-
const w = rect.height + offset * 2;
|
|
37
|
-
// must be memoized a la https://github.com/popperjs/react-popper/issues/391
|
|
38
|
-
const virtElement = useMemo(() => ({
|
|
39
|
-
getBoundingClientRect: () => {
|
|
40
|
-
const x = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[0]) || 0) - (xdistance < 0 ? w : 0);
|
|
41
|
-
const y = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[1]) || 0) - (ydistance < 0 ? w : 0);
|
|
42
|
-
return {
|
|
43
|
-
top: y,
|
|
44
|
-
left: x,
|
|
45
|
-
bottom: y,
|
|
46
|
-
right: x,
|
|
47
|
-
width: 0,
|
|
48
|
-
height: 0,
|
|
49
|
-
x,
|
|
50
|
-
y,
|
|
51
|
-
toJSON() { },
|
|
52
|
-
};
|
|
53
|
-
},
|
|
54
|
-
}), [mouserectClient, xdistance, ydistance, w]);
|
|
55
|
-
const { styles, attributes } = usePopper(virtElement, anchorEl, {
|
|
31
|
+
const theme = useTheme();
|
|
32
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
56
33
|
placement: xdistance < 0 ? 'left' : 'right',
|
|
57
34
|
});
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
35
|
+
const clientPoint = useClientPoint(context, mouserectClient
|
|
36
|
+
? {
|
|
37
|
+
x: mouserectClient[0],
|
|
38
|
+
y: mouserectClient[1],
|
|
39
|
+
}
|
|
40
|
+
: undefined);
|
|
41
|
+
const { getFloatingProps } = useInteractions([clientPoint]);
|
|
42
|
+
const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
|
|
43
|
+
return mouserect ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
|
|
44
|
+
React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
|
|
45
|
+
...floatingStyles,
|
|
46
|
+
zIndex: 100000,
|
|
47
|
+
pointerEvents: 'none',
|
|
48
|
+
}, ...getFloatingProps() },
|
|
62
49
|
`x - ${locstr(mouserect[0], hview)}`,
|
|
63
50
|
React.createElement("br", null),
|
|
64
51
|
`y - ${locstr(viewHeight - mouserect[1], vview)}`,
|
|
65
|
-
React.createElement("br", null)))) : null
|
|
52
|
+
React.createElement("br", null)))) : null;
|
|
66
53
|
});
|
|
67
54
|
export const TooltipWhereClicked = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
|
|
55
|
+
var _a, _b;
|
|
68
56
|
const { classes } = useStyles();
|
|
69
57
|
const { hview, vview, viewHeight } = model;
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
|
|
75
|
-
const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
|
|
76
|
-
return {
|
|
77
|
-
top: y,
|
|
78
|
-
left: x,
|
|
79
|
-
bottom: y,
|
|
80
|
-
right: x,
|
|
81
|
-
width: 0,
|
|
82
|
-
height: 0,
|
|
83
|
-
x,
|
|
84
|
-
y,
|
|
85
|
-
toJSON() { },
|
|
86
|
-
};
|
|
87
|
-
},
|
|
88
|
-
}), [mousedownClient, xdistance, ydistance]);
|
|
89
|
-
const { styles, attributes } = usePopper(virtElement, anchorEl, {
|
|
58
|
+
const theme = useTheme();
|
|
59
|
+
const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
|
|
60
|
+
const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
|
|
61
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
90
62
|
placement: xdistance < 0 ? 'right' : 'left',
|
|
91
63
|
});
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
64
|
+
const clientPoint = useClientPoint(context, { x, y });
|
|
65
|
+
const { getFloatingProps } = useInteractions([clientPoint]);
|
|
66
|
+
const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
|
|
67
|
+
return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
|
|
68
|
+
React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
|
|
69
|
+
...floatingStyles,
|
|
70
|
+
zIndex: 100000,
|
|
71
|
+
pointerEvents: 'none',
|
|
72
|
+
}, ...getFloatingProps() },
|
|
96
73
|
`x - ${locstr(mousedown[0], hview)}`,
|
|
97
74
|
React.createElement("br", null),
|
|
98
75
|
`y - ${locstr(viewHeight - mousedown[1], vview)}`,
|
|
99
|
-
React.createElement("br", null)))) : null
|
|
76
|
+
React.createElement("br", null)))) : null;
|
|
100
77
|
});
|
|
@@ -81,8 +81,8 @@ const DotplotViewInternal = observer(function ({ model, }) {
|
|
|
81
81
|
const mousedown = getOffset(mousedownClient, svg);
|
|
82
82
|
const mousecurr = getOffset(mousecurrClient, svg);
|
|
83
83
|
const mouseup = getOffset(mouseupClient, svg);
|
|
84
|
-
const mouserectClient = mouseupClient || mousecurrClient;
|
|
85
84
|
const mouserect = mouseup || mousecurr;
|
|
85
|
+
const mouserectClient = mouseupClient || mousecurrClient;
|
|
86
86
|
const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
|
|
87
87
|
const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
|
|
88
88
|
const { hview, vview, wheelMode, cursorMode } = model;
|
|
@@ -147,22 +147,26 @@ const DotplotViewInternal = observer(function ({ model, }) {
|
|
|
147
147
|
hview,
|
|
148
148
|
vview,
|
|
149
149
|
]);
|
|
150
|
-
// detect a mouseup after a mousedown was submitted, autoremoves mouseup
|
|
151
|
-
//
|
|
150
|
+
// detect a mouseup after a mousedown was submitted, autoremoves mouseup once
|
|
151
|
+
// that single mouseup is set
|
|
152
152
|
useEffect(() => {
|
|
153
|
-
function globalMouseUp(event) {
|
|
154
|
-
if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
|
|
155
|
-
setMouseUpClient([event.clientX, event.clientY]);
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
setMouseDownClient(undefined);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
153
|
if (mousedown && !mouseup) {
|
|
154
|
+
function globalMouseUp(event) {
|
|
155
|
+
if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
|
|
156
|
+
setMouseUpClient([event.clientX, event.clientY]);
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
setMouseDownClient(undefined);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
162
|
window.addEventListener('mouseup', globalMouseUp, true);
|
|
163
|
-
return () =>
|
|
163
|
+
return () => {
|
|
164
|
+
window.removeEventListener('mouseup', globalMouseUp, true);
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
168
|
+
return () => { };
|
|
164
169
|
}
|
|
165
|
-
return () => { };
|
|
166
170
|
}, [
|
|
167
171
|
validSelect,
|
|
168
172
|
mousedown,
|
|
@@ -185,7 +189,7 @@ const DotplotViewInternal = observer(function ({ model, }) {
|
|
|
185
189
|
React.createElement(VerticalAxis, { model: model }),
|
|
186
190
|
React.createElement(HorizontalAxis, { model: model }),
|
|
187
191
|
React.createElement("div", { ref: ref, className: classes.content },
|
|
188
|
-
mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance
|
|
192
|
+
mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
|
|
189
193
|
validSelect ? (React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
|
|
190
194
|
React.createElement("div", { style: { cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }, onMouseDown: event => {
|
|
191
195
|
if (event.button === 0) {
|
|
@@ -7,13 +7,16 @@ type Coord = [number, number];
|
|
|
7
7
|
export interface ExportSvgOptions {
|
|
8
8
|
rasterizeLayers?: boolean;
|
|
9
9
|
filename?: string;
|
|
10
|
-
Wrapper?: React.FC<
|
|
10
|
+
Wrapper?: React.FC<{
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}>;
|
|
11
13
|
themeName?: string;
|
|
12
14
|
}
|
|
13
15
|
/**
|
|
14
16
|
* #stateModel DotplotView
|
|
15
17
|
* #category view
|
|
16
|
-
* extends
|
|
18
|
+
* extends
|
|
19
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
17
20
|
*/
|
|
18
21
|
export default function stateModelFactory(pm: PluginManager): import("mobx-state-tree").IModelType<{
|
|
19
22
|
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
@@ -59,23 +62,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
59
62
|
readonly assemblyNames: string[];
|
|
60
63
|
readonly displayedRegionsTotalPx: number;
|
|
61
64
|
readonly maxOffset: number;
|
|
62
|
-
readonly minOffset: number;
|
|
63
|
-
* #stateModel DotplotView
|
|
64
|
-
* #category view
|
|
65
|
-
* extends `BaseViewModel`
|
|
66
|
-
*/
|
|
65
|
+
readonly minOffset: number;
|
|
67
66
|
readonly totalBp: number;
|
|
68
67
|
} & {
|
|
69
68
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
70
69
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
71
|
-
readonly currBp: number;
|
|
72
|
-
* #property
|
|
73
|
-
*/
|
|
70
|
+
readonly currBp: number;
|
|
74
71
|
} & {
|
|
75
72
|
pxToBp(px: number): {
|
|
76
|
-
coord: number;
|
|
77
|
-
* #property
|
|
78
|
-
*/
|
|
73
|
+
coord: number;
|
|
79
74
|
index: number;
|
|
80
75
|
refName: string;
|
|
81
76
|
oob: boolean;
|
|
@@ -94,18 +89,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
94
89
|
* #property
|
|
95
90
|
*/
|
|
96
91
|
coord: number;
|
|
97
|
-
regionNumber?: number | undefined;
|
|
92
|
+
regionNumber?: number | undefined; /**
|
|
93
|
+
* #property
|
|
94
|
+
*/
|
|
98
95
|
}): number | undefined;
|
|
99
96
|
} & {
|
|
100
97
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
101
98
|
showAllRegions(): void;
|
|
102
|
-
zoomOut(): void;
|
|
103
|
-
* #property
|
|
104
|
-
*/
|
|
99
|
+
zoomOut(): void;
|
|
105
100
|
zoomIn(): void;
|
|
106
101
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
107
102
|
scrollTo(offsetPx: number): number;
|
|
108
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
103
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
104
|
+
* #property
|
|
105
|
+
* this represents tracks specific to this view specifically used
|
|
106
|
+
* for read vs ref dotplots where this track would not really apply
|
|
107
|
+
* elsewhere
|
|
108
|
+
*/
|
|
109
109
|
scroll(distance: number): number;
|
|
110
110
|
} & {
|
|
111
111
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -150,23 +150,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
150
150
|
readonly assemblyNames: string[];
|
|
151
151
|
readonly displayedRegionsTotalPx: number;
|
|
152
152
|
readonly maxOffset: number;
|
|
153
|
-
readonly minOffset: number;
|
|
154
|
-
* #stateModel DotplotView
|
|
155
|
-
* #category view
|
|
156
|
-
* extends `BaseViewModel`
|
|
157
|
-
*/
|
|
153
|
+
readonly minOffset: number;
|
|
158
154
|
readonly totalBp: number;
|
|
159
155
|
} & {
|
|
160
156
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
161
157
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
162
|
-
readonly currBp: number;
|
|
163
|
-
* #property
|
|
164
|
-
*/
|
|
158
|
+
readonly currBp: number;
|
|
165
159
|
} & {
|
|
166
160
|
pxToBp(px: number): {
|
|
167
|
-
coord: number;
|
|
168
|
-
* #property
|
|
169
|
-
*/
|
|
161
|
+
coord: number;
|
|
170
162
|
index: number;
|
|
171
163
|
refName: string;
|
|
172
164
|
oob: boolean;
|
|
@@ -185,18 +177,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
185
177
|
* #property
|
|
186
178
|
*/
|
|
187
179
|
coord: number;
|
|
188
|
-
regionNumber?: number | undefined;
|
|
180
|
+
regionNumber?: number | undefined; /**
|
|
181
|
+
* #property
|
|
182
|
+
*/
|
|
189
183
|
}): number | undefined;
|
|
190
184
|
} & {
|
|
191
185
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
192
186
|
showAllRegions(): void;
|
|
193
|
-
zoomOut(): void;
|
|
194
|
-
* #property
|
|
195
|
-
*/
|
|
187
|
+
zoomOut(): void;
|
|
196
188
|
zoomIn(): void;
|
|
197
189
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
198
190
|
scrollTo(offsetPx: number): number;
|
|
199
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
191
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
192
|
+
* #property
|
|
193
|
+
* this represents tracks specific to this view specifically used
|
|
194
|
+
* for read vs ref dotplots where this track would not really apply
|
|
195
|
+
* elsewhere
|
|
196
|
+
*/
|
|
200
197
|
scroll(distance: number): number;
|
|
201
198
|
} & {
|
|
202
199
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -233,9 +230,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
233
230
|
} & {
|
|
234
231
|
setMinimized(flag: boolean): void;
|
|
235
232
|
showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
|
|
236
|
-
/**
|
|
237
|
-
* #property
|
|
238
|
-
*/
|
|
239
233
|
hideDisplay(displayId: string): number; /**
|
|
240
234
|
* #property
|
|
241
235
|
*/
|
|
@@ -243,18 +237,20 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
243
237
|
} & {
|
|
244
238
|
trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
|
|
245
239
|
type: string;
|
|
246
|
-
label: string;
|
|
240
|
+
label: string; /**
|
|
241
|
+
* #property
|
|
242
|
+
*/
|
|
247
243
|
subMenu: {
|
|
248
244
|
type: string;
|
|
249
245
|
label: string; /**
|
|
250
246
|
* #property
|
|
251
247
|
*/
|
|
252
248
|
checked: boolean;
|
|
253
|
-
onClick: () => void;
|
|
249
|
+
onClick: () => void; /**
|
|
250
|
+
* #property
|
|
251
|
+
*/
|
|
254
252
|
}[];
|
|
255
|
-
})[];
|
|
256
|
-
* #property
|
|
257
|
-
*/
|
|
253
|
+
})[];
|
|
258
254
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
259
255
|
viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
|
|
260
256
|
}, {
|
|
@@ -362,23 +358,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
362
358
|
readonly assemblyNames: string[];
|
|
363
359
|
readonly displayedRegionsTotalPx: number;
|
|
364
360
|
readonly maxOffset: number;
|
|
365
|
-
readonly minOffset: number;
|
|
366
|
-
* #stateModel DotplotView
|
|
367
|
-
* #category view
|
|
368
|
-
* extends `BaseViewModel`
|
|
369
|
-
*/
|
|
361
|
+
readonly minOffset: number;
|
|
370
362
|
readonly totalBp: number;
|
|
371
363
|
} & {
|
|
372
364
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
373
365
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
374
|
-
readonly currBp: number;
|
|
375
|
-
* #property
|
|
376
|
-
*/
|
|
366
|
+
readonly currBp: number;
|
|
377
367
|
} & {
|
|
378
368
|
pxToBp(px: number): {
|
|
379
|
-
coord: number;
|
|
380
|
-
* #property
|
|
381
|
-
*/
|
|
369
|
+
coord: number;
|
|
382
370
|
index: number;
|
|
383
371
|
refName: string;
|
|
384
372
|
oob: boolean;
|
|
@@ -397,18 +385,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
397
385
|
* #property
|
|
398
386
|
*/
|
|
399
387
|
coord: number;
|
|
400
|
-
regionNumber?: number | undefined;
|
|
388
|
+
regionNumber?: number | undefined; /**
|
|
389
|
+
* #property
|
|
390
|
+
*/
|
|
401
391
|
}): number | undefined;
|
|
402
392
|
} & {
|
|
403
393
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
404
394
|
showAllRegions(): void;
|
|
405
|
-
zoomOut(): void;
|
|
406
|
-
* #property
|
|
407
|
-
*/
|
|
395
|
+
zoomOut(): void;
|
|
408
396
|
zoomIn(): void;
|
|
409
397
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
410
398
|
scrollTo(offsetPx: number): number;
|
|
411
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
399
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
400
|
+
* #property
|
|
401
|
+
* this represents tracks specific to this view specifically used
|
|
402
|
+
* for read vs ref dotplots where this track would not really apply
|
|
403
|
+
* elsewhere
|
|
404
|
+
*/
|
|
412
405
|
scroll(distance: number): number;
|
|
413
406
|
} & {
|
|
414
407
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -452,23 +445,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
452
445
|
readonly assemblyNames: string[];
|
|
453
446
|
readonly displayedRegionsTotalPx: number;
|
|
454
447
|
readonly maxOffset: number;
|
|
455
|
-
readonly minOffset: number;
|
|
456
|
-
* #stateModel DotplotView
|
|
457
|
-
* #category view
|
|
458
|
-
* extends `BaseViewModel`
|
|
459
|
-
*/
|
|
448
|
+
readonly minOffset: number;
|
|
460
449
|
readonly totalBp: number;
|
|
461
450
|
} & {
|
|
462
451
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
463
452
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
464
|
-
readonly currBp: number;
|
|
465
|
-
* #property
|
|
466
|
-
*/
|
|
453
|
+
readonly currBp: number;
|
|
467
454
|
} & {
|
|
468
455
|
pxToBp(px: number): {
|
|
469
|
-
coord: number;
|
|
470
|
-
* #property
|
|
471
|
-
*/
|
|
456
|
+
coord: number;
|
|
472
457
|
index: number;
|
|
473
458
|
refName: string;
|
|
474
459
|
oob: boolean;
|
|
@@ -487,18 +472,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
487
472
|
* #property
|
|
488
473
|
*/
|
|
489
474
|
coord: number;
|
|
490
|
-
regionNumber?: number | undefined;
|
|
475
|
+
regionNumber?: number | undefined; /**
|
|
476
|
+
* #property
|
|
477
|
+
*/
|
|
491
478
|
}): number | undefined;
|
|
492
479
|
} & {
|
|
493
480
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
494
481
|
showAllRegions(): void;
|
|
495
|
-
zoomOut(): void;
|
|
496
|
-
* #property
|
|
497
|
-
*/
|
|
482
|
+
zoomOut(): void;
|
|
498
483
|
zoomIn(): void;
|
|
499
484
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
500
485
|
scrollTo(offsetPx: number): number;
|
|
501
|
-
centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
|
|
486
|
+
centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
|
|
487
|
+
* #property
|
|
488
|
+
* this represents tracks specific to this view specifically used
|
|
489
|
+
* for read vs ref dotplots where this track would not really apply
|
|
490
|
+
* elsewhere
|
|
491
|
+
*/
|
|
502
492
|
scroll(distance: number): number;
|
|
503
493
|
} & {
|
|
504
494
|
moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
|
|
@@ -603,9 +593,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
603
593
|
* #action
|
|
604
594
|
*/
|
|
605
595
|
getCoords(mousedown: Coord, mouseup: Coord): {
|
|
606
|
-
coord: number;
|
|
607
|
-
* #property
|
|
608
|
-
*/
|
|
596
|
+
coord: number;
|
|
609
597
|
index: number;
|
|
610
598
|
refName: string;
|
|
611
599
|
oob: boolean;
|
package/esm/DotplotView/model.js
CHANGED
|
@@ -4,7 +4,7 @@ import { saveAs } from 'file-saver';
|
|
|
4
4
|
import { autorun, transaction } from 'mobx';
|
|
5
5
|
import { getParentRenderProps } from '@jbrowse/core/util/tracks';
|
|
6
6
|
import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
|
|
7
|
-
import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, } from '@jbrowse/core/util';
|
|
7
|
+
import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, getTickDisplayStr, } from '@jbrowse/core/util';
|
|
8
8
|
import { getConf } from '@jbrowse/core/configuration';
|
|
9
9
|
import { ElementId } from '@jbrowse/core/util/types/mst';
|
|
10
10
|
// icons
|
|
@@ -17,19 +17,22 @@ import { getBlockLabelKeysToHide, makeTicks } from './components/util';
|
|
|
17
17
|
// lazies
|
|
18
18
|
const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
|
|
19
19
|
const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
function stringLenPx(a) {
|
|
21
|
+
return measureText(a.slice(0, 30));
|
|
22
|
+
}
|
|
23
|
+
function pxWidthForBlocks(blocks, bpPerPx, hide) {
|
|
22
24
|
return max([
|
|
23
|
-
...blocks.filter(b => !hide.has(b.key)).map(b =>
|
|
25
|
+
...blocks.filter(b => !hide.has(b.key)).map(b => stringLenPx(b.refName)),
|
|
24
26
|
...blocks
|
|
25
27
|
.filter(b => !hide.has(b.key))
|
|
26
|
-
.map(b =>
|
|
28
|
+
.map(b => stringLenPx(getTickDisplayStr(b.end, bpPerPx))),
|
|
27
29
|
]);
|
|
28
|
-
}
|
|
30
|
+
}
|
|
29
31
|
/**
|
|
30
32
|
* #stateModel DotplotView
|
|
31
33
|
* #category view
|
|
32
|
-
* extends
|
|
34
|
+
* extends
|
|
35
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
33
36
|
*/
|
|
34
37
|
export default function stateModelFactory(pm) {
|
|
35
38
|
return types
|
|
@@ -532,8 +535,8 @@ export default function stateModelFactory(pm) {
|
|
|
532
535
|
const voffset = vview.offsetPx;
|
|
533
536
|
const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
|
|
534
537
|
const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
|
|
535
|
-
const by = pxWidthForBlocks(hblocks, hhide);
|
|
536
|
-
const bx = pxWidthForBlocks(vblocks, vhide);
|
|
538
|
+
const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
|
|
539
|
+
const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
|
|
537
540
|
// these are set via autorun to avoid dependency cycle
|
|
538
541
|
self.setBorderY(Math.max(by + padding, 50));
|
|
539
542
|
self.setBorderX(Math.max(bx + padding, 50));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { renderToStaticMarkup } from 'react-dom/server';
|
|
3
2
|
import { when } from 'mobx';
|
|
4
|
-
import { getSession } from '@jbrowse/core/util';
|
|
3
|
+
import { getSession, renderToStaticMarkup } from '@jbrowse/core/util';
|
|
5
4
|
import { ThemeProvider } from '@mui/material';
|
|
6
5
|
import { createJBrowseTheme } from '@jbrowse/core/ui';
|
|
6
|
+
import { getRoot } from 'mobx-state-tree';
|
|
7
7
|
import { GridRaw } from '../components/Grid';
|
|
8
8
|
import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
|
|
9
9
|
import SVGBackground from './SVGBackground';
|
|
@@ -12,6 +12,8 @@ export async function renderToSvg(model, opts) {
|
|
|
12
12
|
var _a;
|
|
13
13
|
await when(() => model.initialized);
|
|
14
14
|
const { themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children) } = opts;
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
16
|
+
const { createRootFn } = getRoot(model);
|
|
15
17
|
const session = getSession(model);
|
|
16
18
|
const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
|
|
17
19
|
const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
|
|
@@ -35,5 +37,5 @@ export async function renderToSvg(model, opts) {
|
|
|
35
37
|
React.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
|
|
36
38
|
React.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (React.createElement("g", { key: i }, result))))),
|
|
37
39
|
React.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
|
|
38
|
-
React.createElement(HorizontalAxisRaw, { model: model }))))));
|
|
40
|
+
React.createElement(HorizontalAxisRaw, { model: model }))))), createRootFn);
|
|
39
41
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-dotplot-view",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.1",
|
|
4
4
|
"description": "JBrowse 2 dotplot view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -36,15 +36,14 @@
|
|
|
36
36
|
"clean": "rimraf dist esm *.tsbuildinfo"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
+
"@floating-ui/react": "^0.26.3",
|
|
39
40
|
"@mui/icons-material": "^5.0.1",
|
|
40
41
|
"@mui/x-data-grid": "^6.0.1",
|
|
41
|
-
"@popperjs/core": "^2.11.0",
|
|
42
42
|
"@types/file-saver": "^2.0.1",
|
|
43
43
|
"@types/normalize-wheel": "^1.0.0",
|
|
44
44
|
"clone": "^2.1.2",
|
|
45
45
|
"file-saver": "^2.0.0",
|
|
46
|
-
"normalize-wheel": "^1.0.1"
|
|
47
|
-
"react-popper": "^2.0.0"
|
|
46
|
+
"normalize-wheel": "^1.0.1"
|
|
48
47
|
},
|
|
49
48
|
"peerDependencies": {
|
|
50
49
|
"@jbrowse/core": "^2.0.0",
|
|
@@ -64,5 +63,5 @@
|
|
|
64
63
|
"publishConfig": {
|
|
65
64
|
"access": "public"
|
|
66
65
|
},
|
|
67
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "442b5f87efddfdf4ccf520b4d9dd01ddd370cb07"
|
|
68
67
|
}
|