@jbrowse/plugin-dotplot-view 2.11.0 → 2.11.2
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/DotplotDisplay/index.d.ts +1 -2
- package/dist/DotplotDisplay/index.js +3 -2
- package/dist/DotplotRenderer/index.d.ts +1 -2
- package/dist/DotplotRenderer/index.js +3 -2
- package/dist/DotplotView/components/Axes.js +8 -8
- package/dist/DotplotView/components/DotplotControls.js +2 -2
- package/dist/DotplotView/components/DotplotTooltip.js +1 -0
- package/dist/DotplotView/components/DotplotView.js +21 -2
- package/dist/DotplotView/components/Grid.js +6 -5
- package/dist/DotplotView/index.d.ts +1 -1
- package/dist/DotplotView/index.js +2 -2
- package/dist/DotplotView/model.d.ts +63 -59
- package/esm/DotplotDisplay/index.d.ts +1 -2
- package/esm/DotplotDisplay/index.js +2 -2
- package/esm/DotplotRenderer/index.d.ts +1 -2
- package/esm/DotplotRenderer/index.js +2 -2
- package/esm/DotplotView/components/Axes.js +9 -9
- package/esm/DotplotView/components/DotplotControls.js +2 -2
- package/esm/DotplotView/components/DotplotTooltip.js +1 -0
- package/esm/DotplotView/components/DotplotView.js +21 -2
- package/esm/DotplotView/components/Grid.js +6 -5
- package/esm/DotplotView/index.d.ts +1 -1
- package/esm/DotplotView/index.js +1 -1
- package/esm/DotplotView/model.d.ts +63 -59
- package/package.json +2 -2
- package/dist/DotplotView/blockTypes.d.ts +0 -53
- package/dist/DotplotView/blockTypes.js +0 -103
- package/esm/DotplotView/blockTypes.d.ts +0 -53
- package/esm/DotplotView/blockTypes.js +0 -95
|
@@ -11,7 +11,7 @@ const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTyp
|
|
|
11
11
|
// locals
|
|
12
12
|
const stateModelFactory_1 = require("./stateModelFactory");
|
|
13
13
|
const DotplotDisplay_1 = __importDefault(require("./components/DotplotDisplay"));
|
|
14
|
-
|
|
14
|
+
function DotplotDisplayF(pm) {
|
|
15
15
|
pm.addDisplayType(() => {
|
|
16
16
|
const configSchema = configSchemaFactory(pm);
|
|
17
17
|
return new DisplayType_1.default({
|
|
@@ -24,7 +24,8 @@ exports.default = (pm) => {
|
|
|
24
24
|
ReactComponent: DotplotDisplay_1.default,
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
|
-
}
|
|
27
|
+
}
|
|
28
|
+
exports.default = DotplotDisplayF;
|
|
28
29
|
/**
|
|
29
30
|
* #config DotplotDisplay
|
|
30
31
|
*/
|
|
@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const DotplotRendering_1 = __importDefault(require("./components/DotplotRendering"));
|
|
7
7
|
const DotplotRenderer_1 = __importDefault(require("./DotplotRenderer"));
|
|
8
8
|
const configSchema_1 = __importDefault(require("./configSchema"));
|
|
9
|
-
|
|
9
|
+
function DotplotRendererF(pluginManager) {
|
|
10
10
|
pluginManager.addRendererType(() => new DotplotRenderer_1.default({
|
|
11
11
|
name: 'DotplotRenderer',
|
|
12
12
|
configSchema: configSchema_1.default,
|
|
13
13
|
ReactComponent: DotplotRendering_1.default,
|
|
14
14
|
pluginManager,
|
|
15
15
|
}));
|
|
16
|
-
}
|
|
16
|
+
}
|
|
17
|
+
exports.default = DotplotRendererF;
|
|
@@ -65,13 +65,13 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
65
65
|
const x = region.offsetPx;
|
|
66
66
|
const y = 0;
|
|
67
67
|
const xoff = Math.floor(x - hview.offsetPx);
|
|
68
|
-
return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1,
|
|
68
|
+
return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, region.refName));
|
|
69
69
|
}),
|
|
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,
|
|
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, ...(0, util_1.getFillProps)(theme.palette.text.primary) })) : null),
|
|
71
71
|
ticks
|
|
72
72
|
.filter(t => t[0].type === 'major')
|
|
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)}`,
|
|
74
|
-
react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2,
|
|
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)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
|
|
74
|
+
react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
|
|
75
75
|
});
|
|
76
76
|
exports.VerticalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
77
77
|
const { borderX, viewHeight } = model;
|
|
@@ -111,11 +111,11 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
111
111
|
const y = region.offsetPx;
|
|
112
112
|
const x = borderX;
|
|
113
113
|
const yoff = Math.floor(viewHeight - y + offsetPx);
|
|
114
|
-
return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff,
|
|
114
|
+
return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fontSize: 11, textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, region.refName));
|
|
115
115
|
}),
|
|
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,
|
|
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, ...(0, util_1.getStrokeProps)(theme.palette.grey[400]) })) : null),
|
|
117
117
|
ticks
|
|
118
118
|
.filter(t => t[0].type === 'major')
|
|
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",
|
|
120
|
-
react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12,
|
|
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", dominantBaseline: "hanging", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
|
|
120
|
+
react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, vview.assemblyNames.join(','))));
|
|
121
121
|
});
|
|
@@ -51,14 +51,14 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
51
51
|
subMenu: [
|
|
52
52
|
{
|
|
53
53
|
onClick: () => model.setCursorMode('move'),
|
|
54
|
-
label: 'Pan by default, select region when ctrl key is held',
|
|
54
|
+
label: 'Pan by default, select region when ctrl/cmd key is held',
|
|
55
55
|
icon: CursorIcon_1.CursorMove,
|
|
56
56
|
type: 'radio',
|
|
57
57
|
checked: model.cursorMode === 'move',
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
onClick: () => model.setCursorMode('crosshair'),
|
|
61
|
-
label: 'Select region by default, pan when ctrl key is held',
|
|
61
|
+
label: 'Select region by default, pan when ctrl/cmd key is held',
|
|
62
62
|
icon: CursorIcon_1.CursorMouse,
|
|
63
63
|
type: 'radio',
|
|
64
64
|
checked: model.cursorMode === 'crosshair',
|
|
@@ -37,6 +37,7 @@ exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model,
|
|
|
37
37
|
const theme = (0, material_1.useTheme)();
|
|
38
38
|
const { refs, floatingStyles, context } = (0, react_2.useFloating)({
|
|
39
39
|
placement: xdistance < 0 ? 'left' : 'right',
|
|
40
|
+
strategy: 'fixed',
|
|
40
41
|
});
|
|
41
42
|
const clientPoint = (0, react_2.useClientPoint)(context, mouserectClient
|
|
42
43
|
? {
|
|
@@ -104,6 +104,7 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
104
104
|
const distanceY = (0, react_1.useRef)(0);
|
|
105
105
|
const scheduled = (0, react_1.useRef)(false);
|
|
106
106
|
const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = (0, react_1.useState)(false);
|
|
107
|
+
const [ctrlKeyDown, setCtrlKeyDown] = (0, react_1.useState)(false);
|
|
107
108
|
const svg = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
|
|
108
109
|
const rootRect = ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || blank;
|
|
109
110
|
const mousedown = getOffset(mousedownClient, svg);
|
|
@@ -175,6 +176,24 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
175
176
|
hview,
|
|
176
177
|
vview,
|
|
177
178
|
]);
|
|
179
|
+
(0, react_1.useEffect)(() => {
|
|
180
|
+
function globalCtrlKeyDown(event) {
|
|
181
|
+
if (event.metaKey || event.ctrlKey) {
|
|
182
|
+
setCtrlKeyDown(true);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
function globalCtrlKeyUp(event) {
|
|
186
|
+
if (!event.metaKey && !event.ctrlKey) {
|
|
187
|
+
setCtrlKeyDown(false);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
window.addEventListener('keydown', globalCtrlKeyDown);
|
|
191
|
+
window.addEventListener('keyup', globalCtrlKeyUp);
|
|
192
|
+
return () => {
|
|
193
|
+
window.removeEventListener('keydown', globalCtrlKeyDown);
|
|
194
|
+
window.addEventListener('keyup', globalCtrlKeyUp);
|
|
195
|
+
};
|
|
196
|
+
}, []);
|
|
178
197
|
// detect a mouseup after a mousedown was submitted, autoremoves mouseup once
|
|
179
198
|
// that single mouseup is set
|
|
180
199
|
(0, react_1.useEffect)(() => {
|
|
@@ -219,12 +238,12 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
219
238
|
react_1.default.createElement("div", { ref: ref, className: classes.content },
|
|
220
239
|
mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
|
|
221
240
|
validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
|
|
222
|
-
react_1.default.createElement("div", { style: { cursor:
|
|
241
|
+
react_1.default.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
|
|
223
242
|
if (event.button === 0) {
|
|
224
243
|
const { clientX, clientY } = event;
|
|
225
244
|
setMouseDownClient([clientX, clientY]);
|
|
226
245
|
setMouseCurrClient([clientX, clientY]);
|
|
227
|
-
setCtrlKeyWasUsed(
|
|
246
|
+
setCtrlKeyWasUsed(ctrlKeyDown);
|
|
228
247
|
}
|
|
229
248
|
} },
|
|
230
249
|
react_1.default.createElement(Grid_1.default, { model: model }, validSelect && mousedown && mouserect ? (react_1.default.createElement("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null)),
|
|
@@ -7,6 +7,7 @@ exports.GridRaw = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const mobx_react_1 = require("mobx-react");
|
|
9
9
|
const material_1 = require("@mui/material");
|
|
10
|
+
const util_1 = require("@jbrowse/core/util");
|
|
10
11
|
exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
|
|
11
12
|
const { viewWidth, viewHeight, hview, vview } = model;
|
|
12
13
|
const hblocks = hview.dynamicBlocks.contentBlocks;
|
|
@@ -29,7 +30,7 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
|
|
|
29
30
|
let lastx = Infinity;
|
|
30
31
|
let lasty = Infinity;
|
|
31
32
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
32
|
-
react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h,
|
|
33
|
+
react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }),
|
|
33
34
|
react_1.default.createElement("g", null,
|
|
34
35
|
hblocks.map(region => {
|
|
35
36
|
const x = region.offsetPx - hview.offsetPx;
|
|
@@ -37,7 +38,7 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
|
|
|
37
38
|
if (render) {
|
|
38
39
|
lastx = x;
|
|
39
40
|
}
|
|
40
|
-
return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight,
|
|
41
|
+
return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) })) : null;
|
|
41
42
|
}),
|
|
42
43
|
vblocks.map(region => {
|
|
43
44
|
const y = viewHeight - (region.offsetPx - vview.offsetPx);
|
|
@@ -45,10 +46,10 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
|
|
|
45
46
|
if (render) {
|
|
46
47
|
lasty = y;
|
|
47
48
|
}
|
|
48
|
-
return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y,
|
|
49
|
+
return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) })) : null;
|
|
49
50
|
}),
|
|
50
|
-
react_1.default.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight,
|
|
51
|
-
react_1.default.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop,
|
|
51
|
+
react_1.default.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }),
|
|
52
|
+
react_1.default.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })),
|
|
52
53
|
children));
|
|
53
54
|
});
|
|
54
55
|
function Grid({ model, children, }) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
-
export default function (pluginManager: PluginManager): void;
|
|
2
|
+
export default function DotplotViewF(pluginManager: PluginManager): void;
|
|
@@ -30,7 +30,7 @@ const react_1 = require("react");
|
|
|
30
30
|
const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
|
|
31
31
|
// locals
|
|
32
32
|
const model_1 = __importDefault(require("./model"));
|
|
33
|
-
function
|
|
33
|
+
function DotplotViewF(pluginManager) {
|
|
34
34
|
pluginManager.addViewType(() => {
|
|
35
35
|
return new ViewType_1.default({
|
|
36
36
|
name: 'DotplotView',
|
|
@@ -40,4 +40,4 @@ function default_1(pluginManager) {
|
|
|
40
40
|
});
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
|
-
exports.default =
|
|
43
|
+
exports.default = DotplotViewF;
|
|
@@ -63,7 +63,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
63
63
|
readonly displayedRegionsTotalPx: number;
|
|
64
64
|
readonly maxOffset: number;
|
|
65
65
|
readonly minOffset: number;
|
|
66
|
-
readonly totalBp: number;
|
|
66
|
+
readonly totalBp: number; /**
|
|
67
|
+
* #stateModel DotplotView
|
|
68
|
+
* #category view
|
|
69
|
+
* extends
|
|
70
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
71
|
+
*/
|
|
67
72
|
} & {
|
|
68
73
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
69
74
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -72,29 +77,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
72
77
|
pxToBp(px: number): {
|
|
73
78
|
coord: number;
|
|
74
79
|
index: number;
|
|
75
|
-
refName: string;
|
|
76
|
-
oob: boolean;
|
|
77
|
-
assemblyName: string; /**
|
|
80
|
+
refName: string; /**
|
|
78
81
|
* #property
|
|
79
82
|
*/
|
|
83
|
+
oob: boolean;
|
|
84
|
+
assemblyName: string;
|
|
80
85
|
offset: number;
|
|
81
86
|
start: number;
|
|
82
|
-
end: number;
|
|
83
|
-
* #property
|
|
84
|
-
*/
|
|
87
|
+
end: number;
|
|
85
88
|
reversed: boolean;
|
|
86
89
|
};
|
|
87
90
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
88
|
-
refName: string;
|
|
89
|
-
* #property
|
|
90
|
-
*/
|
|
91
|
+
refName: string;
|
|
91
92
|
coord: number;
|
|
92
93
|
regionNumber?: number | undefined;
|
|
93
94
|
}): number | undefined;
|
|
94
95
|
} & {
|
|
95
96
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
96
97
|
showAllRegions(): void;
|
|
97
|
-
zoomOut(): void;
|
|
98
|
+
zoomOut(): void; /**
|
|
99
|
+
* #property
|
|
100
|
+
*/
|
|
98
101
|
zoomIn(): void;
|
|
99
102
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
100
103
|
scrollTo(offsetPx: number): number;
|
|
@@ -144,7 +147,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
144
147
|
readonly displayedRegionsTotalPx: number;
|
|
145
148
|
readonly maxOffset: number;
|
|
146
149
|
readonly minOffset: number;
|
|
147
|
-
readonly totalBp: number;
|
|
150
|
+
readonly totalBp: number; /**
|
|
151
|
+
* #stateModel DotplotView
|
|
152
|
+
* #category view
|
|
153
|
+
* extends
|
|
154
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
155
|
+
*/
|
|
148
156
|
} & {
|
|
149
157
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
150
158
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -153,29 +161,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
153
161
|
pxToBp(px: number): {
|
|
154
162
|
coord: number;
|
|
155
163
|
index: number;
|
|
156
|
-
refName: string;
|
|
157
|
-
oob: boolean;
|
|
158
|
-
assemblyName: string; /**
|
|
164
|
+
refName: string; /**
|
|
159
165
|
* #property
|
|
160
166
|
*/
|
|
167
|
+
oob: boolean;
|
|
168
|
+
assemblyName: string;
|
|
161
169
|
offset: number;
|
|
162
170
|
start: number;
|
|
163
|
-
end: number;
|
|
164
|
-
* #property
|
|
165
|
-
*/
|
|
171
|
+
end: number;
|
|
166
172
|
reversed: boolean;
|
|
167
173
|
};
|
|
168
174
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
169
|
-
refName: string;
|
|
170
|
-
* #property
|
|
171
|
-
*/
|
|
175
|
+
refName: string;
|
|
172
176
|
coord: number;
|
|
173
177
|
regionNumber?: number | undefined;
|
|
174
178
|
}): number | undefined;
|
|
175
179
|
} & {
|
|
176
180
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
177
181
|
showAllRegions(): void;
|
|
178
|
-
zoomOut(): void;
|
|
182
|
+
zoomOut(): void; /**
|
|
183
|
+
* #property
|
|
184
|
+
*/
|
|
179
185
|
zoomIn(): void;
|
|
180
186
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
181
187
|
scrollTo(offsetPx: number): number;
|
|
@@ -221,18 +227,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
221
227
|
} & {
|
|
222
228
|
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 | {
|
|
223
229
|
type: string;
|
|
224
|
-
label: string;
|
|
225
|
-
* #property
|
|
226
|
-
*/
|
|
230
|
+
label: string;
|
|
227
231
|
subMenu: {
|
|
228
232
|
type: string;
|
|
229
|
-
label: string;
|
|
230
|
-
* #property
|
|
231
|
-
*/
|
|
233
|
+
label: string;
|
|
232
234
|
checked: boolean;
|
|
233
|
-
onClick: () => void;
|
|
234
|
-
* #property
|
|
235
|
-
*/
|
|
235
|
+
onClick: () => void;
|
|
236
236
|
}[];
|
|
237
237
|
})[];
|
|
238
238
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
@@ -343,7 +343,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
343
343
|
readonly displayedRegionsTotalPx: number;
|
|
344
344
|
readonly maxOffset: number;
|
|
345
345
|
readonly minOffset: number;
|
|
346
|
-
readonly totalBp: number;
|
|
346
|
+
readonly totalBp: number; /**
|
|
347
|
+
* #stateModel DotplotView
|
|
348
|
+
* #category view
|
|
349
|
+
* extends
|
|
350
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
351
|
+
*/
|
|
347
352
|
} & {
|
|
348
353
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
349
354
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -352,29 +357,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
352
357
|
pxToBp(px: number): {
|
|
353
358
|
coord: number;
|
|
354
359
|
index: number;
|
|
355
|
-
refName: string;
|
|
356
|
-
oob: boolean;
|
|
357
|
-
assemblyName: string; /**
|
|
360
|
+
refName: string; /**
|
|
358
361
|
* #property
|
|
359
362
|
*/
|
|
363
|
+
oob: boolean;
|
|
364
|
+
assemblyName: string;
|
|
360
365
|
offset: number;
|
|
361
366
|
start: number;
|
|
362
|
-
end: number;
|
|
363
|
-
* #property
|
|
364
|
-
*/
|
|
367
|
+
end: number;
|
|
365
368
|
reversed: boolean;
|
|
366
369
|
};
|
|
367
370
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
368
|
-
refName: string;
|
|
369
|
-
* #property
|
|
370
|
-
*/
|
|
371
|
+
refName: string;
|
|
371
372
|
coord: number;
|
|
372
373
|
regionNumber?: number | undefined;
|
|
373
374
|
}): number | undefined;
|
|
374
375
|
} & {
|
|
375
376
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
376
377
|
showAllRegions(): void;
|
|
377
|
-
zoomOut(): void;
|
|
378
|
+
zoomOut(): void; /**
|
|
379
|
+
* #property
|
|
380
|
+
*/
|
|
378
381
|
zoomIn(): void;
|
|
379
382
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
380
383
|
scrollTo(offsetPx: number): number;
|
|
@@ -423,7 +426,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
423
426
|
readonly displayedRegionsTotalPx: number;
|
|
424
427
|
readonly maxOffset: number;
|
|
425
428
|
readonly minOffset: number;
|
|
426
|
-
readonly totalBp: number;
|
|
429
|
+
readonly totalBp: number; /**
|
|
430
|
+
* #stateModel DotplotView
|
|
431
|
+
* #category view
|
|
432
|
+
* extends
|
|
433
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
434
|
+
*/
|
|
427
435
|
} & {
|
|
428
436
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
429
437
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -432,29 +440,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
432
440
|
pxToBp(px: number): {
|
|
433
441
|
coord: number;
|
|
434
442
|
index: number;
|
|
435
|
-
refName: string;
|
|
436
|
-
oob: boolean;
|
|
437
|
-
assemblyName: string; /**
|
|
443
|
+
refName: string; /**
|
|
438
444
|
* #property
|
|
439
445
|
*/
|
|
446
|
+
oob: boolean;
|
|
447
|
+
assemblyName: string;
|
|
440
448
|
offset: number;
|
|
441
449
|
start: number;
|
|
442
|
-
end: number;
|
|
443
|
-
* #property
|
|
444
|
-
*/
|
|
450
|
+
end: number;
|
|
445
451
|
reversed: boolean;
|
|
446
452
|
};
|
|
447
453
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
448
|
-
refName: string;
|
|
449
|
-
* #property
|
|
450
|
-
*/
|
|
454
|
+
refName: string;
|
|
451
455
|
coord: number;
|
|
452
456
|
regionNumber?: number | undefined;
|
|
453
457
|
}): number | undefined;
|
|
454
458
|
} & {
|
|
455
459
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
456
460
|
showAllRegions(): void;
|
|
457
|
-
zoomOut(): void;
|
|
461
|
+
zoomOut(): void; /**
|
|
462
|
+
* #property
|
|
463
|
+
*/
|
|
458
464
|
zoomIn(): void;
|
|
459
465
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
460
466
|
scrollTo(offsetPx: number): number;
|
|
@@ -565,16 +571,14 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
565
571
|
getCoords(mousedown: Coord, mouseup: Coord): {
|
|
566
572
|
coord: number;
|
|
567
573
|
index: number;
|
|
568
|
-
refName: string;
|
|
569
|
-
oob: boolean;
|
|
570
|
-
assemblyName: string; /**
|
|
574
|
+
refName: string; /**
|
|
571
575
|
* #property
|
|
572
576
|
*/
|
|
577
|
+
oob: boolean;
|
|
578
|
+
assemblyName: string;
|
|
573
579
|
offset: number;
|
|
574
580
|
start: number;
|
|
575
|
-
end: number;
|
|
576
|
-
* #property
|
|
577
|
-
*/
|
|
581
|
+
end: number;
|
|
578
582
|
reversed: boolean;
|
|
579
583
|
}[] | undefined;
|
|
580
584
|
/**
|
|
@@ -5,7 +5,7 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
|
|
|
5
5
|
// locals
|
|
6
6
|
import { stateModelFactory } from './stateModelFactory';
|
|
7
7
|
import ReactComponent from './components/DotplotDisplay';
|
|
8
|
-
export default (pm)
|
|
8
|
+
export default function DotplotDisplayF(pm) {
|
|
9
9
|
pm.addDisplayType(() => {
|
|
10
10
|
const configSchema = configSchemaFactory(pm);
|
|
11
11
|
return new DisplayType({
|
|
@@ -18,7 +18,7 @@ export default (pm) => {
|
|
|
18
18
|
ReactComponent,
|
|
19
19
|
});
|
|
20
20
|
});
|
|
21
|
-
}
|
|
21
|
+
}
|
|
22
22
|
/**
|
|
23
23
|
* #config DotplotDisplay
|
|
24
24
|
*/
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import ReactComponent from './components/DotplotRendering';
|
|
2
2
|
import DotplotRenderer from './DotplotRenderer';
|
|
3
3
|
import configSchema from './configSchema';
|
|
4
|
-
export default (pluginManager)
|
|
4
|
+
export default function DotplotRendererF(pluginManager) {
|
|
5
5
|
pluginManager.addRendererType(() => new DotplotRenderer({
|
|
6
6
|
name: 'DotplotRenderer',
|
|
7
7
|
configSchema: configSchema,
|
|
8
8
|
ReactComponent,
|
|
9
9
|
pluginManager,
|
|
10
10
|
}));
|
|
11
|
-
}
|
|
11
|
+
}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { makeStyles } from 'tss-react/mui';
|
|
3
3
|
import { observer } from 'mobx-react';
|
|
4
4
|
import { getSnapshot } from 'mobx-state-tree';
|
|
5
|
-
import { getTickDisplayStr } from '@jbrowse/core/util';
|
|
5
|
+
import { getFillProps, getStrokeProps, getTickDisplayStr, } from '@jbrowse/core/util';
|
|
6
6
|
import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
|
|
7
7
|
import { useTheme } from '@mui/material';
|
|
8
8
|
// locals
|
|
@@ -59,13 +59,13 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
|
|
|
59
59
|
const x = region.offsetPx;
|
|
60
60
|
const y = 0;
|
|
61
61
|
const xoff = Math.floor(x - hview.offsetPx);
|
|
62
|
-
return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1,
|
|
62
|
+
return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, region.refName));
|
|
63
63
|
}),
|
|
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,
|
|
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, ...getFillProps(theme.palette.text.primary) })) : null),
|
|
65
65
|
ticks
|
|
66
66
|
.filter(t => t[0].type === 'major')
|
|
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)}`,
|
|
68
|
-
React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2,
|
|
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)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
|
|
68
|
+
React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
|
|
69
69
|
});
|
|
70
70
|
export const VerticalAxis = observer(function ({ model, }) {
|
|
71
71
|
const { borderX, viewHeight } = model;
|
|
@@ -105,11 +105,11 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
|
|
|
105
105
|
const y = region.offsetPx;
|
|
106
106
|
const x = borderX;
|
|
107
107
|
const yoff = Math.floor(viewHeight - y + offsetPx);
|
|
108
|
-
return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff,
|
|
108
|
+
return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, region.refName));
|
|
109
109
|
}),
|
|
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,
|
|
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, ...getStrokeProps(theme.palette.grey[400]) })) : null),
|
|
111
111
|
ticks
|
|
112
112
|
.filter(t => t[0].type === 'major')
|
|
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",
|
|
114
|
-
React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12,
|
|
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", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
|
|
114
|
+
React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary) }, vview.assemblyNames.join(','))));
|
|
115
115
|
});
|
|
@@ -46,14 +46,14 @@ const DotplotControls = observer(function ({ model, }) {
|
|
|
46
46
|
subMenu: [
|
|
47
47
|
{
|
|
48
48
|
onClick: () => model.setCursorMode('move'),
|
|
49
|
-
label: 'Pan by default, select region when ctrl key is held',
|
|
49
|
+
label: 'Pan by default, select region when ctrl/cmd key is held',
|
|
50
50
|
icon: CursorMove,
|
|
51
51
|
type: 'radio',
|
|
52
52
|
checked: model.cursorMode === 'move',
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
onClick: () => model.setCursorMode('crosshair'),
|
|
56
|
-
label: 'Select region by default, pan when ctrl key is held',
|
|
56
|
+
label: 'Select region by default, pan when ctrl/cmd key is held',
|
|
57
57
|
icon: CursorMouse,
|
|
58
58
|
type: 'radio',
|
|
59
59
|
checked: model.cursorMode === 'crosshair',
|
|
@@ -31,6 +31,7 @@ export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mo
|
|
|
31
31
|
const theme = useTheme();
|
|
32
32
|
const { refs, floatingStyles, context } = useFloating({
|
|
33
33
|
placement: xdistance < 0 ? 'left' : 'right',
|
|
34
|
+
strategy: 'fixed',
|
|
34
35
|
});
|
|
35
36
|
const clientPoint = useClientPoint(context, mouserectClient
|
|
36
37
|
? {
|
|
@@ -76,6 +76,7 @@ const DotplotViewInternal = observer(function ({ model, }) {
|
|
|
76
76
|
const distanceY = useRef(0);
|
|
77
77
|
const scheduled = useRef(false);
|
|
78
78
|
const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = useState(false);
|
|
79
|
+
const [ctrlKeyDown, setCtrlKeyDown] = useState(false);
|
|
79
80
|
const svg = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
|
|
80
81
|
const rootRect = ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || blank;
|
|
81
82
|
const mousedown = getOffset(mousedownClient, svg);
|
|
@@ -147,6 +148,24 @@ const DotplotViewInternal = observer(function ({ model, }) {
|
|
|
147
148
|
hview,
|
|
148
149
|
vview,
|
|
149
150
|
]);
|
|
151
|
+
useEffect(() => {
|
|
152
|
+
function globalCtrlKeyDown(event) {
|
|
153
|
+
if (event.metaKey || event.ctrlKey) {
|
|
154
|
+
setCtrlKeyDown(true);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
function globalCtrlKeyUp(event) {
|
|
158
|
+
if (!event.metaKey && !event.ctrlKey) {
|
|
159
|
+
setCtrlKeyDown(false);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
window.addEventListener('keydown', globalCtrlKeyDown);
|
|
163
|
+
window.addEventListener('keyup', globalCtrlKeyUp);
|
|
164
|
+
return () => {
|
|
165
|
+
window.removeEventListener('keydown', globalCtrlKeyDown);
|
|
166
|
+
window.addEventListener('keyup', globalCtrlKeyUp);
|
|
167
|
+
};
|
|
168
|
+
}, []);
|
|
150
169
|
// detect a mouseup after a mousedown was submitted, autoremoves mouseup once
|
|
151
170
|
// that single mouseup is set
|
|
152
171
|
useEffect(() => {
|
|
@@ -191,12 +210,12 @@ const DotplotViewInternal = observer(function ({ model, }) {
|
|
|
191
210
|
React.createElement("div", { ref: ref, className: classes.content },
|
|
192
211
|
mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
|
|
193
212
|
validSelect ? (React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
|
|
194
|
-
React.createElement("div", { style: { cursor:
|
|
213
|
+
React.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
|
|
195
214
|
if (event.button === 0) {
|
|
196
215
|
const { clientX, clientY } = event;
|
|
197
216
|
setMouseDownClient([clientX, clientY]);
|
|
198
217
|
setMouseCurrClient([clientX, clientY]);
|
|
199
|
-
setCtrlKeyWasUsed(
|
|
218
|
+
setCtrlKeyWasUsed(ctrlKeyDown);
|
|
200
219
|
}
|
|
201
220
|
} },
|
|
202
221
|
React.createElement(Grid, { model: model }, validSelect && mousedown && mouserect ? (React.createElement("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null)),
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { observer } from 'mobx-react';
|
|
3
3
|
import { useTheme } from '@mui/material';
|
|
4
|
+
import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
|
|
4
5
|
export const GridRaw = observer(function ({ model, children, }) {
|
|
5
6
|
const { viewWidth, viewHeight, hview, vview } = model;
|
|
6
7
|
const hblocks = hview.dynamicBlocks.contentBlocks;
|
|
@@ -23,7 +24,7 @@ export const GridRaw = observer(function ({ model, children, }) {
|
|
|
23
24
|
let lastx = Infinity;
|
|
24
25
|
let lasty = Infinity;
|
|
25
26
|
return (React.createElement(React.Fragment, null,
|
|
26
|
-
React.createElement("rect", { x: rx, y: ry, width: w, height: h,
|
|
27
|
+
React.createElement("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }),
|
|
27
28
|
React.createElement("g", null,
|
|
28
29
|
hblocks.map(region => {
|
|
29
30
|
const x = region.offsetPx - hview.offsetPx;
|
|
@@ -31,7 +32,7 @@ export const GridRaw = observer(function ({ model, children, }) {
|
|
|
31
32
|
if (render) {
|
|
32
33
|
lastx = x;
|
|
33
34
|
}
|
|
34
|
-
return render ? (React.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, stroke
|
|
35
|
+
return render ? (React.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, ...getStrokeProps(stroke) })) : null;
|
|
35
36
|
}),
|
|
36
37
|
vblocks.map(region => {
|
|
37
38
|
const y = viewHeight - (region.offsetPx - vview.offsetPx);
|
|
@@ -39,10 +40,10 @@ export const GridRaw = observer(function ({ model, children, }) {
|
|
|
39
40
|
if (render) {
|
|
40
41
|
lasty = y;
|
|
41
42
|
}
|
|
42
|
-
return render ? (React.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, stroke
|
|
43
|
+
return render ? (React.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, ...getStrokeProps(stroke) })) : null;
|
|
43
44
|
}),
|
|
44
|
-
React.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, stroke
|
|
45
|
-
React.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, stroke
|
|
45
|
+
React.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...getStrokeProps(stroke) }),
|
|
46
|
+
React.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...getStrokeProps(stroke) })),
|
|
46
47
|
children));
|
|
47
48
|
});
|
|
48
49
|
export default function Grid({ model, children, }) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import PluginManager from '@jbrowse/core/PluginManager';
|
|
2
|
-
export default function (pluginManager: PluginManager): void;
|
|
2
|
+
export default function DotplotViewF(pluginManager: PluginManager): void;
|
package/esm/DotplotView/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { lazy } from 'react';
|
|
|
2
2
|
import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
|
|
3
3
|
// locals
|
|
4
4
|
import stateModelFactory from './model';
|
|
5
|
-
export default function (pluginManager) {
|
|
5
|
+
export default function DotplotViewF(pluginManager) {
|
|
6
6
|
pluginManager.addViewType(() => {
|
|
7
7
|
return new ViewType({
|
|
8
8
|
name: 'DotplotView',
|
|
@@ -63,7 +63,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
63
63
|
readonly displayedRegionsTotalPx: number;
|
|
64
64
|
readonly maxOffset: number;
|
|
65
65
|
readonly minOffset: number;
|
|
66
|
-
readonly totalBp: number;
|
|
66
|
+
readonly totalBp: number; /**
|
|
67
|
+
* #stateModel DotplotView
|
|
68
|
+
* #category view
|
|
69
|
+
* extends
|
|
70
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
71
|
+
*/
|
|
67
72
|
} & {
|
|
68
73
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
69
74
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -72,29 +77,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
72
77
|
pxToBp(px: number): {
|
|
73
78
|
coord: number;
|
|
74
79
|
index: number;
|
|
75
|
-
refName: string;
|
|
76
|
-
oob: boolean;
|
|
77
|
-
assemblyName: string; /**
|
|
80
|
+
refName: string; /**
|
|
78
81
|
* #property
|
|
79
82
|
*/
|
|
83
|
+
oob: boolean;
|
|
84
|
+
assemblyName: string;
|
|
80
85
|
offset: number;
|
|
81
86
|
start: number;
|
|
82
|
-
end: number;
|
|
83
|
-
* #property
|
|
84
|
-
*/
|
|
87
|
+
end: number;
|
|
85
88
|
reversed: boolean;
|
|
86
89
|
};
|
|
87
90
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
88
|
-
refName: string;
|
|
89
|
-
* #property
|
|
90
|
-
*/
|
|
91
|
+
refName: string;
|
|
91
92
|
coord: number;
|
|
92
93
|
regionNumber?: number | undefined;
|
|
93
94
|
}): number | undefined;
|
|
94
95
|
} & {
|
|
95
96
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
96
97
|
showAllRegions(): void;
|
|
97
|
-
zoomOut(): void;
|
|
98
|
+
zoomOut(): void; /**
|
|
99
|
+
* #property
|
|
100
|
+
*/
|
|
98
101
|
zoomIn(): void;
|
|
99
102
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
100
103
|
scrollTo(offsetPx: number): number;
|
|
@@ -144,7 +147,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
144
147
|
readonly displayedRegionsTotalPx: number;
|
|
145
148
|
readonly maxOffset: number;
|
|
146
149
|
readonly minOffset: number;
|
|
147
|
-
readonly totalBp: number;
|
|
150
|
+
readonly totalBp: number; /**
|
|
151
|
+
* #stateModel DotplotView
|
|
152
|
+
* #category view
|
|
153
|
+
* extends
|
|
154
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
155
|
+
*/
|
|
148
156
|
} & {
|
|
149
157
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
150
158
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -153,29 +161,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
153
161
|
pxToBp(px: number): {
|
|
154
162
|
coord: number;
|
|
155
163
|
index: number;
|
|
156
|
-
refName: string;
|
|
157
|
-
oob: boolean;
|
|
158
|
-
assemblyName: string; /**
|
|
164
|
+
refName: string; /**
|
|
159
165
|
* #property
|
|
160
166
|
*/
|
|
167
|
+
oob: boolean;
|
|
168
|
+
assemblyName: string;
|
|
161
169
|
offset: number;
|
|
162
170
|
start: number;
|
|
163
|
-
end: number;
|
|
164
|
-
* #property
|
|
165
|
-
*/
|
|
171
|
+
end: number;
|
|
166
172
|
reversed: boolean;
|
|
167
173
|
};
|
|
168
174
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
169
|
-
refName: string;
|
|
170
|
-
* #property
|
|
171
|
-
*/
|
|
175
|
+
refName: string;
|
|
172
176
|
coord: number;
|
|
173
177
|
regionNumber?: number | undefined;
|
|
174
178
|
}): number | undefined;
|
|
175
179
|
} & {
|
|
176
180
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
177
181
|
showAllRegions(): void;
|
|
178
|
-
zoomOut(): void;
|
|
182
|
+
zoomOut(): void; /**
|
|
183
|
+
* #property
|
|
184
|
+
*/
|
|
179
185
|
zoomIn(): void;
|
|
180
186
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
181
187
|
scrollTo(offsetPx: number): number;
|
|
@@ -221,18 +227,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
221
227
|
} & {
|
|
222
228
|
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 | {
|
|
223
229
|
type: string;
|
|
224
|
-
label: string;
|
|
225
|
-
* #property
|
|
226
|
-
*/
|
|
230
|
+
label: string;
|
|
227
231
|
subMenu: {
|
|
228
232
|
type: string;
|
|
229
|
-
label: string;
|
|
230
|
-
* #property
|
|
231
|
-
*/
|
|
233
|
+
label: string;
|
|
232
234
|
checked: boolean;
|
|
233
|
-
onClick: () => void;
|
|
234
|
-
* #property
|
|
235
|
-
*/
|
|
235
|
+
onClick: () => void;
|
|
236
236
|
}[];
|
|
237
237
|
})[];
|
|
238
238
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
@@ -343,7 +343,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
343
343
|
readonly displayedRegionsTotalPx: number;
|
|
344
344
|
readonly maxOffset: number;
|
|
345
345
|
readonly minOffset: number;
|
|
346
|
-
readonly totalBp: number;
|
|
346
|
+
readonly totalBp: number; /**
|
|
347
|
+
* #stateModel DotplotView
|
|
348
|
+
* #category view
|
|
349
|
+
* extends
|
|
350
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
351
|
+
*/
|
|
347
352
|
} & {
|
|
348
353
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
349
354
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -352,29 +357,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
352
357
|
pxToBp(px: number): {
|
|
353
358
|
coord: number;
|
|
354
359
|
index: number;
|
|
355
|
-
refName: string;
|
|
356
|
-
oob: boolean;
|
|
357
|
-
assemblyName: string; /**
|
|
360
|
+
refName: string; /**
|
|
358
361
|
* #property
|
|
359
362
|
*/
|
|
363
|
+
oob: boolean;
|
|
364
|
+
assemblyName: string;
|
|
360
365
|
offset: number;
|
|
361
366
|
start: number;
|
|
362
|
-
end: number;
|
|
363
|
-
* #property
|
|
364
|
-
*/
|
|
367
|
+
end: number;
|
|
365
368
|
reversed: boolean;
|
|
366
369
|
};
|
|
367
370
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
368
|
-
refName: string;
|
|
369
|
-
* #property
|
|
370
|
-
*/
|
|
371
|
+
refName: string;
|
|
371
372
|
coord: number;
|
|
372
373
|
regionNumber?: number | undefined;
|
|
373
374
|
}): number | undefined;
|
|
374
375
|
} & {
|
|
375
376
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
376
377
|
showAllRegions(): void;
|
|
377
|
-
zoomOut(): void;
|
|
378
|
+
zoomOut(): void; /**
|
|
379
|
+
* #property
|
|
380
|
+
*/
|
|
378
381
|
zoomIn(): void;
|
|
379
382
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
380
383
|
scrollTo(offsetPx: number): number;
|
|
@@ -423,7 +426,12 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
423
426
|
readonly displayedRegionsTotalPx: number;
|
|
424
427
|
readonly maxOffset: number;
|
|
425
428
|
readonly minOffset: number;
|
|
426
|
-
readonly totalBp: number;
|
|
429
|
+
readonly totalBp: number; /**
|
|
430
|
+
* #stateModel DotplotView
|
|
431
|
+
* #category view
|
|
432
|
+
* extends
|
|
433
|
+
* - [BaseViewModel](../baseviewmodel)
|
|
434
|
+
*/
|
|
427
435
|
} & {
|
|
428
436
|
readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
429
437
|
readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
|
|
@@ -432,29 +440,27 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
432
440
|
pxToBp(px: number): {
|
|
433
441
|
coord: number;
|
|
434
442
|
index: number;
|
|
435
|
-
refName: string;
|
|
436
|
-
oob: boolean;
|
|
437
|
-
assemblyName: string; /**
|
|
443
|
+
refName: string; /**
|
|
438
444
|
* #property
|
|
439
445
|
*/
|
|
446
|
+
oob: boolean;
|
|
447
|
+
assemblyName: string;
|
|
440
448
|
offset: number;
|
|
441
449
|
start: number;
|
|
442
|
-
end: number;
|
|
443
|
-
* #property
|
|
444
|
-
*/
|
|
450
|
+
end: number;
|
|
445
451
|
reversed: boolean;
|
|
446
452
|
};
|
|
447
453
|
bpToPx({ refName, coord, regionNumber, }: {
|
|
448
|
-
refName: string;
|
|
449
|
-
* #property
|
|
450
|
-
*/
|
|
454
|
+
refName: string;
|
|
451
455
|
coord: number;
|
|
452
456
|
regionNumber?: number | undefined;
|
|
453
457
|
}): number | undefined;
|
|
454
458
|
} & {
|
|
455
459
|
setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
|
|
456
460
|
showAllRegions(): void;
|
|
457
|
-
zoomOut(): void;
|
|
461
|
+
zoomOut(): void; /**
|
|
462
|
+
* #property
|
|
463
|
+
*/
|
|
458
464
|
zoomIn(): void;
|
|
459
465
|
zoomTo(bpPerPx: number, offset?: number | undefined): number;
|
|
460
466
|
scrollTo(offsetPx: number): number;
|
|
@@ -565,16 +571,14 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
565
571
|
getCoords(mousedown: Coord, mouseup: Coord): {
|
|
566
572
|
coord: number;
|
|
567
573
|
index: number;
|
|
568
|
-
refName: string;
|
|
569
|
-
oob: boolean;
|
|
570
|
-
assemblyName: string; /**
|
|
574
|
+
refName: string; /**
|
|
571
575
|
* #property
|
|
572
576
|
*/
|
|
577
|
+
oob: boolean;
|
|
578
|
+
assemblyName: string;
|
|
573
579
|
offset: number;
|
|
574
580
|
start: number;
|
|
575
|
-
end: number;
|
|
576
|
-
* #property
|
|
577
|
-
*/
|
|
581
|
+
end: number;
|
|
578
582
|
reversed: boolean;
|
|
579
583
|
}[] | undefined;
|
|
580
584
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jbrowse/plugin-dotplot-view",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.2",
|
|
4
4
|
"description": "JBrowse 2 dotplot view",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jbrowse",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "511048cb6965f0bf624c96de244e7fd47fce17d6"
|
|
67
67
|
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
type Func<T> = (value: BaseBlock, index: number, array: BaseBlock[]) => T;
|
|
2
|
-
export declare class BlockSet {
|
|
3
|
-
blocks: BaseBlock[];
|
|
4
|
-
constructor(blocks?: BaseBlock[]);
|
|
5
|
-
push(block: BaseBlock): void;
|
|
6
|
-
getBlocks(): BaseBlock[];
|
|
7
|
-
map<T, U = this>(func: Func<T>, thisarg?: U): T[];
|
|
8
|
-
forEach<T, U = this>(func: Func<T>, thisarg?: U): void;
|
|
9
|
-
get length(): number;
|
|
10
|
-
get totalWidthPx(): number;
|
|
11
|
-
get offsetPx(): number;
|
|
12
|
-
get contentBlocks(): BaseBlock[];
|
|
13
|
-
}
|
|
14
|
-
export declare class BaseBlock {
|
|
15
|
-
reversed?: boolean;
|
|
16
|
-
refName: string;
|
|
17
|
-
start: number;
|
|
18
|
-
end: number;
|
|
19
|
-
assemblyName: string;
|
|
20
|
-
key: string;
|
|
21
|
-
widthPx: number;
|
|
22
|
-
offsetPx: number;
|
|
23
|
-
/**
|
|
24
|
-
* a block that should be shown as filled with data
|
|
25
|
-
*/
|
|
26
|
-
constructor(data: Record<string, any>);
|
|
27
|
-
toRegion(): {
|
|
28
|
-
refName: string;
|
|
29
|
-
start: number;
|
|
30
|
-
end: number;
|
|
31
|
-
assemblyName: string;
|
|
32
|
-
reversed: boolean | undefined;
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
export declare class ContentBlock extends BaseBlock {
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* marker block representing one or more blocks that are
|
|
39
|
-
* too small to be shown at the current zoom level
|
|
40
|
-
*/
|
|
41
|
-
export declare class ElidedBlock extends BaseBlock {
|
|
42
|
-
widthPx: number;
|
|
43
|
-
elidedBlockCount: number;
|
|
44
|
-
constructor(data: Record<string, any>);
|
|
45
|
-
push(otherBlock: ElidedBlock): void;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* marker block that sits between two different displayed regions
|
|
49
|
-
* and provides a thick border between them
|
|
50
|
-
*/
|
|
51
|
-
export declare class InterRegionPaddingBlock extends BaseBlock {
|
|
52
|
-
}
|
|
53
|
-
export {};
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.InterRegionPaddingBlock = exports.ElidedBlock = exports.ContentBlock = exports.BaseBlock = exports.BlockSet = void 0;
|
|
4
|
-
const util_1 = require("@jbrowse/core/util");
|
|
5
|
-
class BlockSet {
|
|
6
|
-
constructor(blocks = []) {
|
|
7
|
-
this.blocks = blocks;
|
|
8
|
-
}
|
|
9
|
-
push(block) {
|
|
10
|
-
if (block instanceof ElidedBlock && this.blocks.length > 0) {
|
|
11
|
-
const lastBlock = this.blocks.at(-1);
|
|
12
|
-
if (lastBlock instanceof ElidedBlock) {
|
|
13
|
-
lastBlock.push(block);
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
this.blocks.push(block);
|
|
18
|
-
}
|
|
19
|
-
getBlocks() {
|
|
20
|
-
return this.blocks;
|
|
21
|
-
}
|
|
22
|
-
map(func, thisarg) {
|
|
23
|
-
// eslint-disable-next-line unicorn/no-array-method-this-argument
|
|
24
|
-
return this.blocks.map(func, thisarg);
|
|
25
|
-
}
|
|
26
|
-
forEach(func, thisarg) {
|
|
27
|
-
// eslint-disable-next-line unicorn/no-array-method-this-argument
|
|
28
|
-
return this.blocks.forEach(func, thisarg);
|
|
29
|
-
}
|
|
30
|
-
get length() {
|
|
31
|
-
return this.blocks.length;
|
|
32
|
-
}
|
|
33
|
-
get totalWidthPx() {
|
|
34
|
-
return this.blocks.length
|
|
35
|
-
? (0, util_1.sum)(this.blocks.map(blocks => blocks.widthPx))
|
|
36
|
-
: 0;
|
|
37
|
-
}
|
|
38
|
-
get offsetPx() {
|
|
39
|
-
return this.blocks.length ? this.blocks[0].offsetPx : 0;
|
|
40
|
-
}
|
|
41
|
-
get contentBlocks() {
|
|
42
|
-
return this.blocks.filter(block => block instanceof ContentBlock);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
exports.BlockSet = BlockSet;
|
|
46
|
-
class BaseBlock {
|
|
47
|
-
/**
|
|
48
|
-
* a block that should be shown as filled with data
|
|
49
|
-
*/
|
|
50
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
51
|
-
constructor(data) {
|
|
52
|
-
this.widthPx = 0;
|
|
53
|
-
this.offsetPx = 0;
|
|
54
|
-
Object.assign(this, data);
|
|
55
|
-
this.assemblyName = data.assemblyName;
|
|
56
|
-
this.refName = data.refName;
|
|
57
|
-
this.start = data.start;
|
|
58
|
-
this.end = data.end;
|
|
59
|
-
this.key = data.key;
|
|
60
|
-
}
|
|
61
|
-
toRegion() {
|
|
62
|
-
return {
|
|
63
|
-
refName: this.refName,
|
|
64
|
-
start: this.start,
|
|
65
|
-
end: this.end,
|
|
66
|
-
assemblyName: this.assemblyName,
|
|
67
|
-
reversed: this.reversed,
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
exports.BaseBlock = BaseBlock;
|
|
72
|
-
class ContentBlock extends BaseBlock {
|
|
73
|
-
}
|
|
74
|
-
exports.ContentBlock = ContentBlock;
|
|
75
|
-
/**
|
|
76
|
-
* marker block representing one or more blocks that are
|
|
77
|
-
* too small to be shown at the current zoom level
|
|
78
|
-
*/
|
|
79
|
-
class ElidedBlock extends BaseBlock {
|
|
80
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
81
|
-
constructor(data) {
|
|
82
|
-
super(data);
|
|
83
|
-
this.elidedBlockCount = 0;
|
|
84
|
-
this.widthPx = data.widthPx;
|
|
85
|
-
}
|
|
86
|
-
push(otherBlock) {
|
|
87
|
-
this.elidedBlockCount += 1;
|
|
88
|
-
if (otherBlock) {
|
|
89
|
-
this.refName = '';
|
|
90
|
-
this.start = 0;
|
|
91
|
-
this.end = 0;
|
|
92
|
-
this.widthPx += otherBlock.widthPx;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
exports.ElidedBlock = ElidedBlock;
|
|
97
|
-
/**
|
|
98
|
-
* marker block that sits between two different displayed regions
|
|
99
|
-
* and provides a thick border between them
|
|
100
|
-
*/
|
|
101
|
-
class InterRegionPaddingBlock extends BaseBlock {
|
|
102
|
-
}
|
|
103
|
-
exports.InterRegionPaddingBlock = InterRegionPaddingBlock;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
type Func<T> = (value: BaseBlock, index: number, array: BaseBlock[]) => T;
|
|
2
|
-
export declare class BlockSet {
|
|
3
|
-
blocks: BaseBlock[];
|
|
4
|
-
constructor(blocks?: BaseBlock[]);
|
|
5
|
-
push(block: BaseBlock): void;
|
|
6
|
-
getBlocks(): BaseBlock[];
|
|
7
|
-
map<T, U = this>(func: Func<T>, thisarg?: U): T[];
|
|
8
|
-
forEach<T, U = this>(func: Func<T>, thisarg?: U): void;
|
|
9
|
-
get length(): number;
|
|
10
|
-
get totalWidthPx(): number;
|
|
11
|
-
get offsetPx(): number;
|
|
12
|
-
get contentBlocks(): BaseBlock[];
|
|
13
|
-
}
|
|
14
|
-
export declare class BaseBlock {
|
|
15
|
-
reversed?: boolean;
|
|
16
|
-
refName: string;
|
|
17
|
-
start: number;
|
|
18
|
-
end: number;
|
|
19
|
-
assemblyName: string;
|
|
20
|
-
key: string;
|
|
21
|
-
widthPx: number;
|
|
22
|
-
offsetPx: number;
|
|
23
|
-
/**
|
|
24
|
-
* a block that should be shown as filled with data
|
|
25
|
-
*/
|
|
26
|
-
constructor(data: Record<string, any>);
|
|
27
|
-
toRegion(): {
|
|
28
|
-
refName: string;
|
|
29
|
-
start: number;
|
|
30
|
-
end: number;
|
|
31
|
-
assemblyName: string;
|
|
32
|
-
reversed: boolean | undefined;
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
export declare class ContentBlock extends BaseBlock {
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* marker block representing one or more blocks that are
|
|
39
|
-
* too small to be shown at the current zoom level
|
|
40
|
-
*/
|
|
41
|
-
export declare class ElidedBlock extends BaseBlock {
|
|
42
|
-
widthPx: number;
|
|
43
|
-
elidedBlockCount: number;
|
|
44
|
-
constructor(data: Record<string, any>);
|
|
45
|
-
push(otherBlock: ElidedBlock): void;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* marker block that sits between two different displayed regions
|
|
49
|
-
* and provides a thick border between them
|
|
50
|
-
*/
|
|
51
|
-
export declare class InterRegionPaddingBlock extends BaseBlock {
|
|
52
|
-
}
|
|
53
|
-
export {};
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { sum } from '@jbrowse/core/util';
|
|
2
|
-
export class BlockSet {
|
|
3
|
-
constructor(blocks = []) {
|
|
4
|
-
this.blocks = blocks;
|
|
5
|
-
}
|
|
6
|
-
push(block) {
|
|
7
|
-
if (block instanceof ElidedBlock && this.blocks.length > 0) {
|
|
8
|
-
const lastBlock = this.blocks.at(-1);
|
|
9
|
-
if (lastBlock instanceof ElidedBlock) {
|
|
10
|
-
lastBlock.push(block);
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
this.blocks.push(block);
|
|
15
|
-
}
|
|
16
|
-
getBlocks() {
|
|
17
|
-
return this.blocks;
|
|
18
|
-
}
|
|
19
|
-
map(func, thisarg) {
|
|
20
|
-
// eslint-disable-next-line unicorn/no-array-method-this-argument
|
|
21
|
-
return this.blocks.map(func, thisarg);
|
|
22
|
-
}
|
|
23
|
-
forEach(func, thisarg) {
|
|
24
|
-
// eslint-disable-next-line unicorn/no-array-method-this-argument
|
|
25
|
-
return this.blocks.forEach(func, thisarg);
|
|
26
|
-
}
|
|
27
|
-
get length() {
|
|
28
|
-
return this.blocks.length;
|
|
29
|
-
}
|
|
30
|
-
get totalWidthPx() {
|
|
31
|
-
return this.blocks.length
|
|
32
|
-
? sum(this.blocks.map(blocks => blocks.widthPx))
|
|
33
|
-
: 0;
|
|
34
|
-
}
|
|
35
|
-
get offsetPx() {
|
|
36
|
-
return this.blocks.length ? this.blocks[0].offsetPx : 0;
|
|
37
|
-
}
|
|
38
|
-
get contentBlocks() {
|
|
39
|
-
return this.blocks.filter(block => block instanceof ContentBlock);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
export class BaseBlock {
|
|
43
|
-
/**
|
|
44
|
-
* a block that should be shown as filled with data
|
|
45
|
-
*/
|
|
46
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
47
|
-
constructor(data) {
|
|
48
|
-
this.widthPx = 0;
|
|
49
|
-
this.offsetPx = 0;
|
|
50
|
-
Object.assign(this, data);
|
|
51
|
-
this.assemblyName = data.assemblyName;
|
|
52
|
-
this.refName = data.refName;
|
|
53
|
-
this.start = data.start;
|
|
54
|
-
this.end = data.end;
|
|
55
|
-
this.key = data.key;
|
|
56
|
-
}
|
|
57
|
-
toRegion() {
|
|
58
|
-
return {
|
|
59
|
-
refName: this.refName,
|
|
60
|
-
start: this.start,
|
|
61
|
-
end: this.end,
|
|
62
|
-
assemblyName: this.assemblyName,
|
|
63
|
-
reversed: this.reversed,
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
export class ContentBlock extends BaseBlock {
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* marker block representing one or more blocks that are
|
|
71
|
-
* too small to be shown at the current zoom level
|
|
72
|
-
*/
|
|
73
|
-
export class ElidedBlock extends BaseBlock {
|
|
74
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
75
|
-
constructor(data) {
|
|
76
|
-
super(data);
|
|
77
|
-
this.elidedBlockCount = 0;
|
|
78
|
-
this.widthPx = data.widthPx;
|
|
79
|
-
}
|
|
80
|
-
push(otherBlock) {
|
|
81
|
-
this.elidedBlockCount += 1;
|
|
82
|
-
if (otherBlock) {
|
|
83
|
-
this.refName = '';
|
|
84
|
-
this.start = 0;
|
|
85
|
-
this.end = 0;
|
|
86
|
-
this.widthPx += otherBlock.widthPx;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* marker block that sits between two different displayed regions
|
|
92
|
-
* and provides a thick border between them
|
|
93
|
-
*/
|
|
94
|
-
export class InterRegionPaddingBlock extends BaseBlock {
|
|
95
|
-
}
|