@jbrowse/plugin-dotplot-view 2.13.0 → 2.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ComparativeRenderer/index.d.ts +2 -2
- package/dist/DotplotDisplay/index.js +0 -1
- package/dist/DotplotDisplay/stateModelFactory.d.ts +3 -5
- package/dist/DotplotDisplay/stateModelFactory.js +0 -1
- package/dist/DotplotReadVsRef/index.js +3 -1
- package/dist/DotplotRenderer/ComparativeRenderRpc.d.ts +2 -2
- package/dist/DotplotRenderer/DotplotRenderer.d.ts +1 -0
- package/dist/DotplotRenderer/DotplotRenderer.js +4 -3
- package/dist/DotplotView/1dview.js +0 -2
- package/dist/DotplotView/components/Axes.js +1 -1
- package/dist/DotplotView/components/DotplotControls.js +30 -10
- package/dist/DotplotView/components/DotplotTooltip.js +2 -2
- package/dist/DotplotView/components/DotplotView.js +15 -27
- package/dist/DotplotView/components/DotplotWarnings.js +9 -3
- package/dist/DotplotView/components/ExportSvgDialog.js +13 -5
- package/dist/DotplotView/components/Grid.js +2 -2
- package/dist/DotplotView/components/ImportForm/ImportCustomTrack.js +14 -4
- package/dist/DotplotView/components/ImportForm/ImportSyntenyTrackSelector.js +3 -1
- package/dist/DotplotView/components/ImportForm/index.js +9 -3
- package/dist/DotplotView/components/WarningDialog.js +4 -3
- package/dist/DotplotView/components/util.js +4 -2
- package/dist/DotplotView/model.d.ts +1 -7
- package/dist/DotplotView/model.js +12 -13
- package/dist/DotplotView/svgcomponents/SVGDotplotView.js +3 -2
- package/dist/LaunchDotplotView.js +4 -2
- package/dist/ServerSideRenderedBlockContent.js +7 -3
- package/dist/ServerSideSyntenyRendering.d.ts +2 -2
- package/dist/ServerSideSyntenyRendering.js +1 -1
- package/esm/ComparativeRenderer/index.d.ts +2 -2
- package/esm/DotplotDisplay/index.js +0 -1
- package/esm/DotplotDisplay/stateModelFactory.d.ts +3 -5
- package/esm/DotplotDisplay/stateModelFactory.js +0 -1
- package/esm/DotplotReadVsRef/index.js +3 -1
- package/esm/DotplotRenderer/ComparativeRenderRpc.d.ts +2 -2
- package/esm/DotplotRenderer/DotplotRenderer.d.ts +1 -0
- package/esm/DotplotRenderer/DotplotRenderer.js +4 -3
- package/esm/DotplotView/1dview.js +0 -2
- package/esm/DotplotView/components/Axes.js +1 -1
- package/esm/DotplotView/components/DotplotControls.js +30 -10
- package/esm/DotplotView/components/DotplotTooltip.js +2 -2
- package/esm/DotplotView/components/DotplotView.js +15 -27
- package/esm/DotplotView/components/DotplotWarnings.js +9 -3
- package/esm/DotplotView/components/ExportSvgDialog.js +13 -5
- package/esm/DotplotView/components/Grid.js +2 -2
- package/esm/DotplotView/components/ImportForm/ImportCustomTrack.js +14 -4
- package/esm/DotplotView/components/ImportForm/ImportSyntenyTrackSelector.js +3 -1
- package/esm/DotplotView/components/ImportForm/index.js +9 -3
- package/esm/DotplotView/components/WarningDialog.js +4 -3
- package/esm/DotplotView/components/util.js +4 -2
- package/esm/DotplotView/model.d.ts +1 -7
- package/esm/DotplotView/model.js +12 -13
- package/esm/DotplotView/svgcomponents/SVGDotplotView.js +3 -2
- package/esm/LaunchDotplotView.js +4 -2
- package/esm/ServerSideRenderedBlockContent.js +7 -3
- package/esm/ServerSideSyntenyRendering.d.ts +2 -2
- package/esm/ServerSideSyntenyRendering.js +1 -1
- package/package.json +3 -3
|
@@ -2,11 +2,11 @@ import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
|
|
|
2
2
|
import ComparativeRenderer, { RenderArgs as ComparativeRenderArgs, RenderArgsSerialized as ComparativeRenderArgsSerialized, RenderResults, ResultsSerialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
|
|
3
3
|
import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
|
|
4
4
|
interface RenderArgs extends ComparativeRenderArgs {
|
|
5
|
-
adapterConfig:
|
|
5
|
+
adapterConfig: Record<string, unknown>;
|
|
6
6
|
rendererType: string;
|
|
7
7
|
}
|
|
8
8
|
interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
|
|
9
|
-
adapterConfig:
|
|
9
|
+
adapterConfig: Record<string, unknown>;
|
|
10
10
|
rendererType: string;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.default = DotplotDisplayF;
|
|
7
7
|
exports.configSchemaFactory = configSchemaFactory;
|
|
8
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
9
8
|
const configuration_1 = require("@jbrowse/core/configuration");
|
|
10
9
|
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
11
10
|
const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
|
|
@@ -43,7 +43,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
43
43
|
error: unknown;
|
|
44
44
|
message: string | undefined;
|
|
45
45
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
|
|
46
|
-
onHorizontalScroll?:
|
|
46
|
+
onHorizontalScroll?: () => void;
|
|
47
47
|
blockState?: Record<string, any>;
|
|
48
48
|
}>;
|
|
49
49
|
readonly DisplayBlurb: React.FC<{
|
|
@@ -56,9 +56,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
56
56
|
error: unknown;
|
|
57
57
|
message: string | undefined;
|
|
58
58
|
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
59
|
-
id: import("mobx-state-tree"
|
|
60
|
-
* #method
|
|
61
|
-
*/).IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
59
|
+
id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
62
60
|
type: import("mobx-state-tree").ISimpleType<string>;
|
|
63
61
|
rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
|
|
64
62
|
}, {
|
|
@@ -107,7 +105,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
|
|
|
107
105
|
* #method
|
|
108
106
|
*/
|
|
109
107
|
renderSvg(opts: ExportSvgOptions & {
|
|
110
|
-
theme
|
|
108
|
+
theme?: ThemeOptions;
|
|
111
109
|
}): Promise<React.JSX.Element | null>;
|
|
112
110
|
} & {
|
|
113
111
|
afterAttach(): void;
|
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.stateModelFactory = stateModelFactory;
|
|
7
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
8
7
|
const react_1 = __importDefault(require("react"));
|
|
9
8
|
const mobx_state_tree_1 = require("mobx-state-tree");
|
|
10
9
|
const configuration_1 = require("@jbrowse/core/configuration");
|
|
@@ -25,7 +25,9 @@ function DotplotReadVsRefMenuItem(pluginManager) {
|
|
|
25
25
|
{
|
|
26
26
|
label: 'Dotplot of read vs ref',
|
|
27
27
|
icon: Add_1.default,
|
|
28
|
-
onClick: () =>
|
|
28
|
+
onClick: () => {
|
|
29
|
+
(0, DotplotReadVsRef_1.onClick)(feature, self);
|
|
30
|
+
},
|
|
29
31
|
},
|
|
30
32
|
]
|
|
31
33
|
: []),
|
|
@@ -2,11 +2,11 @@ import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
|
|
|
2
2
|
import ComparativeRenderer, { RenderArgs as ComparativeRenderArgs, RenderArgsSerialized as ComparativeRenderArgsSerialized, RenderResults, ResultsSerialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
|
|
3
3
|
import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
|
|
4
4
|
interface RenderArgs extends ComparativeRenderArgs {
|
|
5
|
-
adapterConfig:
|
|
5
|
+
adapterConfig: Record<string, unknown>;
|
|
6
6
|
rendererType: string;
|
|
7
7
|
}
|
|
8
8
|
interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
|
|
9
|
-
adapterConfig:
|
|
9
|
+
adapterConfig: Record<string, unknown>;
|
|
10
10
|
rendererType: string;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
@@ -3,6 +3,7 @@ import { Region } from '@jbrowse/core/util';
|
|
|
3
3
|
import ComparativeRenderer, { RenderArgsDeserialized, RenderArgs } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
|
|
4
4
|
import { Dotplot1DViewModel } from '../DotplotView/model';
|
|
5
5
|
export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
|
|
6
|
+
adapterConfig: AnyConfigurationModel;
|
|
6
7
|
height: number;
|
|
7
8
|
width: number;
|
|
8
9
|
highResolutionScaling: number;
|
|
@@ -58,7 +58,8 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
|
|
|
58
58
|
const thresholds = (0, configuration_1.readConfObject)(config, 'thresholds');
|
|
59
59
|
const palette = (0, configuration_1.readConfObject)(config, 'thresholdsPalette');
|
|
60
60
|
const isCallback = config.color.isCallback;
|
|
61
|
-
const
|
|
61
|
+
const hview = views[0];
|
|
62
|
+
const vview = views[1];
|
|
62
63
|
const db1 = (_a = hview.dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.offsetPx;
|
|
63
64
|
const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
|
|
64
65
|
const warnings = [];
|
|
@@ -139,12 +140,12 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
|
|
|
139
140
|
const refName = feature.get('refName');
|
|
140
141
|
const mate = feature.get('mate');
|
|
141
142
|
const mateRef = mate.refName;
|
|
142
|
-
let r;
|
|
143
|
+
let r = 'black';
|
|
143
144
|
if (colorBy === 'identity') {
|
|
144
145
|
const identity = feature.get('identity');
|
|
145
146
|
for (let i = 0; i < thresholds.length; i++) {
|
|
146
147
|
if (identity > +thresholds[i]) {
|
|
147
|
-
r = palette[i];
|
|
148
|
+
r = palette[i] || 'black';
|
|
148
149
|
break;
|
|
149
150
|
}
|
|
150
151
|
}
|
|
@@ -77,7 +77,6 @@ exports.Dotplot1DView = Dotplot1DView;
|
|
|
77
77
|
const DotplotHView = Dotplot1DView.extend(self => ({
|
|
78
78
|
views: {
|
|
79
79
|
get width() {
|
|
80
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
81
80
|
return (0, mobx_state_tree_1.getParent)(self).viewWidth;
|
|
82
81
|
},
|
|
83
82
|
},
|
|
@@ -86,7 +85,6 @@ exports.DotplotHView = DotplotHView;
|
|
|
86
85
|
const DotplotVView = Dotplot1DView.extend(self => ({
|
|
87
86
|
views: {
|
|
88
87
|
get width() {
|
|
89
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
90
88
|
return (0, mobx_state_tree_1.getParent)(self).viewHeight;
|
|
91
89
|
},
|
|
92
90
|
},
|
|
@@ -70,7 +70,7 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
70
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}
|
|
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
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, }) {
|
|
@@ -23,25 +23,35 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
23
23
|
react_1.default.createElement(Icons_1.TrackSelector, null)),
|
|
24
24
|
react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
|
|
25
25
|
{
|
|
26
|
-
onClick: () =>
|
|
26
|
+
onClick: () => {
|
|
27
|
+
model.squareView();
|
|
28
|
+
},
|
|
27
29
|
label: 'Square view - same base pairs per pixel',
|
|
28
30
|
},
|
|
29
31
|
{
|
|
30
|
-
onClick: () =>
|
|
32
|
+
onClick: () => {
|
|
33
|
+
model.squareViewProportional();
|
|
34
|
+
},
|
|
31
35
|
label: 'Rectanglularize view - same total bp',
|
|
32
36
|
},
|
|
33
37
|
{
|
|
34
|
-
onClick: () =>
|
|
38
|
+
onClick: () => {
|
|
39
|
+
model.showAllRegions();
|
|
40
|
+
},
|
|
35
41
|
label: 'Show all regions',
|
|
36
42
|
},
|
|
37
43
|
{
|
|
38
|
-
onClick: () =>
|
|
44
|
+
onClick: () => {
|
|
45
|
+
model.setDrawCigar(!model.drawCigar);
|
|
46
|
+
},
|
|
39
47
|
type: 'checkbox',
|
|
40
48
|
label: 'Draw CIGAR',
|
|
41
49
|
checked: model.drawCigar,
|
|
42
50
|
},
|
|
43
51
|
{
|
|
44
|
-
onClick: () =>
|
|
52
|
+
onClick: () => {
|
|
53
|
+
model.setShowPanButtons(!model.showPanButtons);
|
|
54
|
+
},
|
|
45
55
|
label: 'Show pan buttons',
|
|
46
56
|
type: 'checkbox',
|
|
47
57
|
checked: model.showPanButtons,
|
|
@@ -50,14 +60,18 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
50
60
|
label: 'Click and drag mode',
|
|
51
61
|
subMenu: [
|
|
52
62
|
{
|
|
53
|
-
onClick: () =>
|
|
63
|
+
onClick: () => {
|
|
64
|
+
model.setCursorMode('move');
|
|
65
|
+
},
|
|
54
66
|
label: 'Pan by default, select region when ctrl/cmd key is held',
|
|
55
67
|
icon: CursorIcon_1.CursorMove,
|
|
56
68
|
type: 'radio',
|
|
57
69
|
checked: model.cursorMode === 'move',
|
|
58
70
|
},
|
|
59
71
|
{
|
|
60
|
-
onClick: () =>
|
|
72
|
+
onClick: () => {
|
|
73
|
+
model.setCursorMode('crosshair');
|
|
74
|
+
},
|
|
61
75
|
label: 'Select region by default, pan when ctrl/cmd key is held',
|
|
62
76
|
icon: CursorIcon_1.CursorMouse,
|
|
63
77
|
type: 'radio',
|
|
@@ -69,19 +83,25 @@ const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
69
83
|
label: 'Wheel scroll mode',
|
|
70
84
|
subMenu: [
|
|
71
85
|
{
|
|
72
|
-
onClick: () =>
|
|
86
|
+
onClick: () => {
|
|
87
|
+
model.setWheelMode('pan');
|
|
88
|
+
},
|
|
73
89
|
label: 'Pans view',
|
|
74
90
|
type: 'radio',
|
|
75
91
|
checked: model.wheelMode === 'pan',
|
|
76
92
|
},
|
|
77
93
|
{
|
|
78
|
-
onClick: () =>
|
|
94
|
+
onClick: () => {
|
|
95
|
+
model.setWheelMode('zoom');
|
|
96
|
+
},
|
|
79
97
|
label: 'Zooms view',
|
|
80
98
|
type: 'radio',
|
|
81
99
|
checked: model.wheelMode === 'zoom',
|
|
82
100
|
},
|
|
83
101
|
{
|
|
84
|
-
onClick: () =>
|
|
102
|
+
onClick: () => {
|
|
103
|
+
model.setWheelMode('none');
|
|
104
|
+
},
|
|
85
105
|
label: 'Disable',
|
|
86
106
|
type: 'radio',
|
|
87
107
|
checked: model.wheelMode === 'none',
|
|
@@ -46,7 +46,7 @@ exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model,
|
|
|
46
46
|
}
|
|
47
47
|
: undefined);
|
|
48
48
|
const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
|
|
49
|
-
const popperTheme = (_a = theme
|
|
49
|
+
const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
|
|
50
50
|
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 },
|
|
51
51
|
react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
|
|
52
52
|
...floatingStyles,
|
|
@@ -70,7 +70,7 @@ exports.TooltipWhereClicked = (0, mobx_react_1.observer)(function ({ model, mous
|
|
|
70
70
|
});
|
|
71
71
|
const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
|
|
72
72
|
const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
|
|
73
|
-
const popperTheme = (_a = theme
|
|
73
|
+
const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
|
|
74
74
|
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 },
|
|
75
75
|
react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
|
|
76
76
|
...floatingStyles,
|
|
@@ -150,7 +150,9 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
150
150
|
if (ref.current) {
|
|
151
151
|
const curr = ref.current;
|
|
152
152
|
curr.addEventListener('wheel', onWheel);
|
|
153
|
-
return () =>
|
|
153
|
+
return () => {
|
|
154
|
+
curr.removeEventListener('wheel', onWheel);
|
|
155
|
+
};
|
|
154
156
|
}
|
|
155
157
|
return () => { };
|
|
156
158
|
}, [hview, vview, wheelMode, mousecurr, rootRect.height]);
|
|
@@ -163,17 +165,10 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
163
165
|
}
|
|
164
166
|
}
|
|
165
167
|
window.addEventListener('mousemove', globalMouseMove);
|
|
166
|
-
return () =>
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
mousedownClient,
|
|
171
|
-
cursorMode,
|
|
172
|
-
ctrlKeyWasUsed,
|
|
173
|
-
mouseupClient,
|
|
174
|
-
hview,
|
|
175
|
-
vview,
|
|
176
|
-
]);
|
|
168
|
+
return () => {
|
|
169
|
+
window.removeEventListener('mousemove', globalMouseMove);
|
|
170
|
+
};
|
|
171
|
+
}, [validPan, mousecurrClient, mousedownClient, mouseupClient, hview, vview]);
|
|
177
172
|
(0, react_1.useEffect)(() => {
|
|
178
173
|
function globalCtrlKeyDown(event) {
|
|
179
174
|
if (event.metaKey || event.ctrlKey) {
|
|
@@ -209,19 +204,8 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
209
204
|
window.removeEventListener('mouseup', globalMouseUp, true);
|
|
210
205
|
};
|
|
211
206
|
}
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
}
|
|
215
|
-
}, [
|
|
216
|
-
validSelect,
|
|
217
|
-
mousedown,
|
|
218
|
-
mousecurr,
|
|
219
|
-
mouseup,
|
|
220
|
-
xdistance,
|
|
221
|
-
ydistance,
|
|
222
|
-
ctrlKeyWasUsed,
|
|
223
|
-
cursorMode,
|
|
224
|
-
]);
|
|
207
|
+
return () => { };
|
|
208
|
+
}, [validSelect, mousedown, mouseup, xdistance, ydistance]);
|
|
225
209
|
return (react_1.default.createElement("div", null,
|
|
226
210
|
react_1.default.createElement(Header_1.default, { model: model, selection: !validSelect || !(mousedown && mouserect)
|
|
227
211
|
? undefined
|
|
@@ -229,7 +213,11 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
229
213
|
width: Math.abs(xdistance),
|
|
230
214
|
height: Math.abs(ydistance),
|
|
231
215
|
} }),
|
|
232
|
-
react_1.default.createElement("div", { ref: root, className: classes.root, onMouseLeave: () =>
|
|
216
|
+
react_1.default.createElement("div", { ref: root, className: classes.root, onMouseLeave: () => {
|
|
217
|
+
setMouseOvered(false);
|
|
218
|
+
}, onMouseEnter: () => {
|
|
219
|
+
setMouseOvered(true);
|
|
220
|
+
} },
|
|
233
221
|
react_1.default.createElement("div", { className: classes.container },
|
|
234
222
|
react_1.default.createElement(Axes_1.VerticalAxis, { model: model }),
|
|
235
223
|
react_1.default.createElement(Axes_1.HorizontalAxis, { model: model }),
|
|
@@ -283,7 +271,7 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
283
271
|
] })),
|
|
284
272
|
react_1.default.createElement(ui_1.ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle }))));
|
|
285
273
|
});
|
|
286
|
-
const DotplotView = (0, mobx_react_1.observer)(({ model })
|
|
274
|
+
const DotplotView = (0, mobx_react_1.observer)(function ({ model }) {
|
|
287
275
|
const { initialized, loading, error } = model;
|
|
288
276
|
if ((!initialized && !loading) || error) {
|
|
289
277
|
return react_1.default.createElement(ImportForm_1.default, { model: model });
|
|
@@ -35,8 +35,14 @@ const DotplotWarnings = (0, mobx_react_1.observer)(function ({ model, }) {
|
|
|
35
35
|
return trackWarnings.length && !hide ? (react_1.default.createElement(material_1.Alert, { severity: "warning" },
|
|
36
36
|
"Warnings during render",
|
|
37
37
|
' ',
|
|
38
|
-
react_1.default.createElement(material_1.Button, { onClick: () =>
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
react_1.default.createElement(material_1.Button, { onClick: () => {
|
|
39
|
+
setShown(true);
|
|
40
|
+
} }, "More info"),
|
|
41
|
+
shown ? (react_1.default.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
|
|
42
|
+
setShown(false);
|
|
43
|
+
} })) : null,
|
|
44
|
+
react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
|
|
45
|
+
setHide(true);
|
|
46
|
+
} }, "Dismiss"))) : null;
|
|
41
47
|
});
|
|
42
48
|
exports.default = DotplotWarnings;
|
|
@@ -38,7 +38,7 @@ function TextField2({ children, ...rest }) {
|
|
|
38
38
|
react_1.default.createElement(material_1.TextField, { ...rest }, children)));
|
|
39
39
|
}
|
|
40
40
|
function useSvgLocal(key, val) {
|
|
41
|
-
return (0, util_1.useLocalStorage)(
|
|
41
|
+
return (0, util_1.useLocalStorage)(`svg-${key}`, val);
|
|
42
42
|
}
|
|
43
43
|
function ExportSvgDialog({ model, handleClose, }) {
|
|
44
44
|
const session = (0, util_1.getSession)(model);
|
|
@@ -51,13 +51,21 @@ function ExportSvgDialog({ model, handleClose, }) {
|
|
|
51
51
|
return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
|
|
52
52
|
react_1.default.createElement(material_1.DialogContent, null,
|
|
53
53
|
error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
|
|
54
|
-
react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event =>
|
|
55
|
-
|
|
54
|
+
react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
|
|
55
|
+
setFilename(event.target.value);
|
|
56
|
+
} }),
|
|
57
|
+
session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
|
|
58
|
+
setThemeName(event.target.value);
|
|
59
|
+
} }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key },
|
|
56
60
|
// @ts-expect-error
|
|
57
61
|
val.name || '(Unknown name)'))))) : null,
|
|
58
|
-
offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () =>
|
|
62
|
+
offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
|
|
63
|
+
setRasterizeLayers(val => !val);
|
|
64
|
+
} }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
|
|
59
65
|
react_1.default.createElement(material_1.DialogActions, null,
|
|
60
|
-
react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () =>
|
|
66
|
+
react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
|
|
67
|
+
handleClose();
|
|
68
|
+
} }, "Cancel"),
|
|
61
69
|
react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
|
|
62
70
|
setLoading(true);
|
|
63
71
|
setError(undefined);
|
|
@@ -28,8 +28,8 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
|
|
|
28
28
|
const ry = Math.max(viewHeight - vtop, 0);
|
|
29
29
|
const w = Math.min(htop - hbottom, viewWidth);
|
|
30
30
|
const h = Math.min(viewHeight - vbottom - ry, viewHeight);
|
|
31
|
-
let lastx =
|
|
32
|
-
let lasty =
|
|
31
|
+
let lastx = Number.POSITIVE_INFINITY;
|
|
32
|
+
let lasty = Number.POSITIVE_INFINITY;
|
|
33
33
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
34
34
|
react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }),
|
|
35
35
|
react_1.default.createElement("g", null,
|
|
@@ -130,7 +130,9 @@ const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSession
|
|
|
130
130
|
return (react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
|
|
131
131
|
error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null,
|
|
132
132
|
react_1.default.createElement(material_1.Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view in the dotplot. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
|
|
133
|
-
react_1.default.createElement(material_1.RadioGroup, { value: radioOption, onChange: event =>
|
|
133
|
+
react_1.default.createElement(material_1.RadioGroup, { value: radioOption, onChange: event => {
|
|
134
|
+
setValue(event.target.value);
|
|
135
|
+
} },
|
|
134
136
|
react_1.default.createElement(material_1.Grid, { container: true, justifyContent: "center" },
|
|
135
137
|
react_1.default.createElement(material_1.Grid, { item: true },
|
|
136
138
|
react_1.default.createElement(material_1.FormControlLabel, { value: ".paf", control: react_1.default.createElement(material_1.Radio, null), label: ".paf" })),
|
|
@@ -154,10 +156,18 @@ const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSession
|
|
|
154
156
|
react_1.default.createElement("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)" }, "(more info)")),
|
|
155
157
|
react_1.default.createElement("div", { style: { display: 'flex' } },
|
|
156
158
|
react_1.default.createElement("div", null,
|
|
157
|
-
react_1.default.createElement(ui_1.FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc =>
|
|
159
|
+
react_1.default.createElement(ui_1.FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => {
|
|
160
|
+
setFileLocation(loc);
|
|
161
|
+
} })),
|
|
158
162
|
react_1.default.createElement("div", null,
|
|
159
|
-
react_1.default.createElement(ui_1.FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc =>
|
|
163
|
+
react_1.default.createElement(ui_1.FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
|
|
164
|
+
setBed1Location(loc);
|
|
165
|
+
} })),
|
|
160
166
|
react_1.default.createElement("div", null,
|
|
161
|
-
react_1.default.createElement(ui_1.FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc =>
|
|
167
|
+
react_1.default.createElement(ui_1.FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
|
|
168
|
+
setBed2Location(loc);
|
|
169
|
+
} }))))) : (react_1.default.createElement(ui_1.FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
|
|
170
|
+
setFileLocation(loc);
|
|
171
|
+
} }))))));
|
|
162
172
|
});
|
|
163
173
|
exports.default = OpenTrack;
|
|
@@ -66,6 +66,8 @@ const Selector = (0, mobx_react_1.observer)(({ model, assembly1, assembly2, setS
|
|
|
66
66
|
react_1.default.createElement("i", null, "inside"),
|
|
67
67
|
" the DotplotView, which can turn on one or more SyntenyTracks (more than one can be displayed at once). Look for the track selector icon ",
|
|
68
68
|
react_1.default.createElement(Icons_1.TrackSelector, null)),
|
|
69
|
-
filteredTracks.length ? (react_1.default.createElement(material_1.Select, { value: value, onChange: event =>
|
|
69
|
+
filteredTracks.length ? (react_1.default.createElement(material_1.Select, { value: value, onChange: event => {
|
|
70
|
+
setValue(event.target.value);
|
|
71
|
+
} }, filteredTracks.map(track => (react_1.default.createElement(material_1.MenuItem, { key: track.trackId, value: track.trackId }, (0, tracks_1.getTrackName)(track, session)))))) : (react_1.default.createElement(ui_1.ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
|
|
70
72
|
});
|
|
71
73
|
exports.default = Selector;
|
|
@@ -56,7 +56,9 @@ function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData,
|
|
|
56
56
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
57
57
|
react_1.default.createElement(material_1.FormControl, null,
|
|
58
58
|
react_1.default.createElement(material_1.FormLabel, { id: "group-label" }, "(Optional) Select or add a synteny track"),
|
|
59
|
-
react_1.default.createElement(material_1.RadioGroup, { row: true, value: choice, onChange: event =>
|
|
59
|
+
react_1.default.createElement(material_1.RadioGroup, { row: true, value: choice, onChange: event => {
|
|
60
|
+
setChoice(event.target.value);
|
|
61
|
+
}, "aria-labelledby": "group-label" },
|
|
60
62
|
react_1.default.createElement(material_1.FormControlLabel, { value: "none", control: react_1.default.createElement(material_1.Radio, null), label: "None" }),
|
|
61
63
|
react_1.default.createElement(material_1.FormControlLabel, { value: "tracklist", control: react_1.default.createElement(material_1.Radio, null), label: "Existing track" }),
|
|
62
64
|
react_1.default.createElement(material_1.FormControlLabel, { value: "custom", control: react_1.default.createElement(material_1.Radio, null), label: "New track" }))),
|
|
@@ -109,9 +111,13 @@ const DotplotImportForm = (0, mobx_react_1.observer)(({ model }) => {
|
|
|
109
111
|
react_1.default.createElement(material_1.Typography, { style: { textAlign: 'center' } }, "Select assemblies for dotplot view"),
|
|
110
112
|
react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
|
|
111
113
|
react_1.default.createElement(material_1.Grid, { item: true },
|
|
112
|
-
react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly1, onChange: val =>
|
|
114
|
+
react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly1, onChange: val => {
|
|
115
|
+
setAssembly1(val);
|
|
116
|
+
}, session: session })),
|
|
113
117
|
react_1.default.createElement(material_1.Grid, { item: true },
|
|
114
|
-
react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly2, onChange: val =>
|
|
118
|
+
react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly2, onChange: val => {
|
|
119
|
+
setAssembly2(val);
|
|
120
|
+
}, session: session })),
|
|
115
121
|
react_1.default.createElement(material_1.Grid, { item: true },
|
|
116
122
|
react_1.default.createElement(material_1.FormControl, null,
|
|
117
123
|
react_1.default.createElement(material_1.Button, { onClick: onOpenClick, variant: "contained", color: "primary" }, "Launch"))))),
|
|
@@ -22,9 +22,10 @@ const WarningDialog = (0, mobx_react_1.observer)(function WarningDialog({ trackW
|
|
|
22
22
|
for (let i = 0; i < trackWarnings.length; i++) {
|
|
23
23
|
const track = trackWarnings[i];
|
|
24
24
|
const name = (0, configuration_1.getConf)(track, 'name');
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const d = track.displays[0];
|
|
26
|
+
for (let j = 0; j < d.warnings.length; j++) {
|
|
27
|
+
const warning = d.warnings[j];
|
|
28
|
+
rows.push({ name, ...warning, id: `${i}_${j}` });
|
|
28
29
|
}
|
|
29
30
|
}
|
|
30
31
|
const columns = [
|
|
@@ -9,7 +9,7 @@ function locstr(px, view, includeAsm = true) {
|
|
|
9
9
|
const coord = Math.floor(start + offset);
|
|
10
10
|
return oob
|
|
11
11
|
? 'out of bounds'
|
|
12
|
-
: `${includeAsm ?
|
|
12
|
+
: `${includeAsm ? `{${assemblyName}}` : ''}${refName}:${coord.toLocaleString('en-US')}`;
|
|
13
13
|
}
|
|
14
14
|
function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
|
|
15
15
|
const blockLabelKeysToHide = new Set();
|
|
@@ -39,7 +39,9 @@ function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
|
|
|
39
39
|
function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
|
|
40
40
|
scale = Math.abs(scale);
|
|
41
41
|
const minMajorPitchBp = minMajorPitchPx * scale;
|
|
42
|
-
const majorMagnitude = Number
|
|
42
|
+
const majorMagnitude = +Number(minMajorPitchBp)
|
|
43
|
+
.toExponential()
|
|
44
|
+
.split(/e/i)[1];
|
|
43
45
|
let majorPitch = 10 ** majorMagnitude;
|
|
44
46
|
while (majorPitch < minMajorPitchBp) {
|
|
45
47
|
majorPitch *= 2;
|
|
@@ -448,12 +448,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
448
448
|
* #action
|
|
449
449
|
*/
|
|
450
450
|
setError(e: unknown): void;
|
|
451
|
-
/**
|
|
452
|
-
* #action
|
|
453
|
-
* removes the view itself from the state tree entirely by calling the
|
|
454
|
-
* parent removeView
|
|
455
|
-
*/
|
|
456
|
-
closeView(): void;
|
|
457
451
|
/**
|
|
458
452
|
* #action
|
|
459
453
|
*/
|
|
@@ -552,7 +546,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
|
|
|
552
546
|
/**
|
|
553
547
|
* #getter
|
|
554
548
|
*/
|
|
555
|
-
readonly error:
|
|
549
|
+
readonly error: unknown;
|
|
556
550
|
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
|
|
557
551
|
export type DotplotViewStateModel = ReturnType<typeof stateModelFactory>;
|
|
558
552
|
export type DotplotViewModel = Instance<DotplotViewStateModel>;
|
|
@@ -305,15 +305,6 @@ function stateModelFactory(pm) {
|
|
|
305
305
|
setError(e) {
|
|
306
306
|
self.volatileError = e;
|
|
307
307
|
},
|
|
308
|
-
/**
|
|
309
|
-
* #action
|
|
310
|
-
* removes the view itself from the state tree entirely by calling the
|
|
311
|
-
* parent removeView
|
|
312
|
-
*/
|
|
313
|
-
closeView() {
|
|
314
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
315
|
-
(0, mobx_state_tree_1.getParent)(self, 2).removeView(self);
|
|
316
|
-
},
|
|
317
308
|
/**
|
|
318
309
|
* #action
|
|
319
310
|
*/
|
|
@@ -372,7 +363,9 @@ function stateModelFactory(pm) {
|
|
|
372
363
|
const schema = pm.pluggableConfigSchemaType('track');
|
|
373
364
|
const conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
|
|
374
365
|
const t = self.tracks.filter(t => t.configuration === conf);
|
|
375
|
-
(0, mobx_1.transaction)(() =>
|
|
366
|
+
(0, mobx_1.transaction)(() => {
|
|
367
|
+
t.forEach(t => self.tracks.remove(t));
|
|
368
|
+
});
|
|
376
369
|
return t.length;
|
|
377
370
|
},
|
|
378
371
|
/**
|
|
@@ -619,15 +612,21 @@ function stateModelFactory(pm) {
|
|
|
619
612
|
},
|
|
620
613
|
{
|
|
621
614
|
label: 'Square view - same bp per pixel',
|
|
622
|
-
onClick: () =>
|
|
615
|
+
onClick: () => {
|
|
616
|
+
self.squareView();
|
|
617
|
+
},
|
|
623
618
|
},
|
|
624
619
|
{
|
|
625
620
|
label: 'Rectangular view - same total bp',
|
|
626
|
-
onClick: () =>
|
|
621
|
+
onClick: () => {
|
|
622
|
+
self.squareView();
|
|
623
|
+
},
|
|
627
624
|
},
|
|
628
625
|
{
|
|
629
626
|
label: 'Show all regions',
|
|
630
|
-
onClick: () =>
|
|
627
|
+
onClick: () => {
|
|
628
|
+
self.showAllRegions();
|
|
629
|
+
},
|
|
631
630
|
},
|
|
632
631
|
{
|
|
633
632
|
label: 'Export SVG',
|
|
@@ -18,7 +18,6 @@ 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 }) => children } = opts;
|
|
21
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
21
|
const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
|
|
23
22
|
const session = (0, util_1.getSession)(model);
|
|
24
23
|
const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
|
|
@@ -41,7 +40,9 @@ async function renderToSvg(model, opts) {
|
|
|
41
40
|
react_1.default.createElement("defs", null,
|
|
42
41
|
react_1.default.createElement("clipPath", { id: "clip-ruler" },
|
|
43
42
|
react_1.default.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
|
|
44
|
-
react_1.default.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (
|
|
43
|
+
react_1.default.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (
|
|
44
|
+
/* biome-ignore lint/suspicious/noArrayIndexKey: */
|
|
45
|
+
react_1.default.createElement("g", { key: i }, result))))),
|
|
45
46
|
react_1.default.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
|
|
46
47
|
react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))), createRootFn);
|
|
47
48
|
}
|